javascript - Jquery - 缓慢加载页面并具有加载gif效果

Question

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

关于我所说内容的一个小例子:

<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;
    });

});

希望您明白我在说什么，是否可以使其加载速度变慢？我的意思是平滑。

Answer 1

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

注释:

• 如果您不想在可以使用的页面的显示/隐藏之间切换，那么最好使用一个事件，而不是为每个新链接重复相同的代码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>