jQuery-缓慢加载页面并加载gif效果

script0r 发表于 Dev

script0r

我正在尝试使页面加载时具有加载效果。

关于即时通讯的一个小例子：

<a href="#" id="a1">PAGE1</a>
<a href="#" id="a2">PAGE2</a>
<a href="#" id="a3">PAGE3</a>

<div id="page1">Hey this is page 1</div>
<div id="page2">Hey this is page 2</div>
<div id="page3">Hey this is page 3</div>

jQuery的：

$(document).ready(function(){

   $("#page1").hide();
   $("#page2").hide();
   $("#page3").hide();

    $("#a1").click(function(){
        $("#page1").show();
        return false;
    });

    $("#a2").click(function(){
        $("#page2").show();
        return false;
    });

    $("#a3").click(function(){
        $("#page3").show();
        return false;
    });

});

希望您了解我在说什么，是否有可能使其加载速度变慢？我的意思是顺利。

扎卡里亚·阿查尔基（Zakaria Acharki）

因为您使用的是jQuery，所以可以使用.fadeToggle（）代替show()下面的检查示例。

注意事项：

如果您不希望在show/hide可以使用的页面之间进行切换，那么最好使用一个事件，而不是对每个新链接重复相同的代码，那是更好的选择fadeIn()。
您可以使用逗号分隔符在多个选择器上触发相同的方法：
```
$("#page1,#page2,#page3").hide();
```

希望这可以帮助。

$(function(){
  $("#page1,#page2,#page3,#loading").hide();

  $("a").click(function(e){
    e.preventDefault();
    $('#loading').show();

    switch($(this).attr('id')){
      case 'a1':
        $("#page1").fadeToggle("slow",function(){ $('#loading').hide() });
      break;
      case 'a2':
        $("#page2").fadeToggle(2000,function(){ $('#loading').hide() });
      break;
      case 'a3':
        $("#page3").fadeToggle("fast",function(){ $('#loading').hide() });
      break;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="loading" src="http://www.tbaf.org.tw/event/2016safe/imgs/loader1.gif" width="250">
<a href="#" id="a1">PAGE1</a>
<a href="#" id="a2">PAGE2</a>
<a href="#" id="a3">PAGE3</a>

<div id="page1">Hey this is page 1</div>
<div id="page2">Hey this is page 2</div>
<div id="page3">Hey this is page 3</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。