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

 $(document).ready(function() { $("#page1").hide(); $("#page2").hide(); $("#page3").hide(); $("#loadingGif").hide(); function anim(id) { $("#loadingGif").show(); setTimeout(function() { $("#loadingGif").hide(); $(id).fadeIn("slow"); }, 400) } $("#a1").click(function() { anim("#page1"); return false; }); $("#a2").click(function() { anim("#page2"); return false; }); $("#a3").click(function() { anim("#page3"); return false; }); }); 

 #loadingGif { width: 200px; height: 200px; position: fixed; top: 100px; left: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> <img id="loadingGif" src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/InternetSlowdown_Day.gif" width="200" height="200" /> 

您可以使用jQuery的fadeIn

$（選擇器）.fadeIn（速度，回調）;

您可以在http://www.w3schools.com/jquery/jquery_fade.asp閱讀更多信息

和這里http://api.jquery.com/fadein/

Answer 2

因為您使用的是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> 

Answer 3

您可以創建一個稱為preloader div，當您單擊鏈接時可以使用fadeIn()然后加載內容，然后稍微delay一下fadeOut preloader

 var preloader = $('.preloader'); preloader.hide(); $('a').click(function() { var target = $(this).data('target'); preloader.fadeIn(function() { $(target).siblings().css('opacity', 0); $(target).css('opacity', 1); }).delay(1500).fadeOut(); }); 

 .preloader { position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; background: white; display: flex; align-items: center; justify-content: center; } .content { opacity: 0; transition: all 0.4s ease-in; position: absolute; top: 50px; left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" data-target="#page1">PAGE1</a> <a href="#" data-target="#page2">PAGE2</a> <a href="#" data-target="#page3">PAGE3</a> <div class="content-container"> <div class="content" id="page1">Hey this is page 1</div> <div class="content" id="page2">Hey this is page 2</div> <div class="content" id="page3">Hey this is page 3</div> </div> <div class="preloader"> <img src="https://d13yacurqjgara.cloudfront.net/users/12755/screenshots/1037374/hex-loader2.gif" alt=""> </div>