jQuery使用預加載器進行平滑頁面轉換

當我按下我的網站中的鏈接時，我嘗試使用此代碼（下面）淡入div內容，而當我按另一個鏈接並淡入新內容時淡出。可以在這裏看到這個例子：jQuery使用預加載器進行平滑頁面轉換

http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

好了，我需要把動畫GIF預加載每個頁面的頂部將被加載之前。有人可以幫我使用jQuery代碼嗎？謝謝..

代碼交換內容和淡入/出：

$(document).ready(function() { 
    $("#content").css("display", "none"); 
    $("#content").fadeIn(1000); 
    $("a").click(function(event){ 
     event.preventDefault(); 
     linkLocation = this.href; 
     $("#content").fadeOut(1000, redirectPage); 
    }); 
    function redirectPage() { 
     window.location = linkLocation; 
    } 
});

來源

2012-03-26 Giorgio

我很確定這個頁面的代碼會在新頁面加載時導致非常光滑的「閃爍」，然後在淡入之前隱藏在$（document）.ready（）中。 – Dave 2012-03-26 16:18:58

使用此添加加載覆蓋。

$("a").click(function(event){ 
    event.preventDefault(); 
    linkLocation = this.href; 
    $("#content").fadeOut(1000, redirectPage);  
    $("body").append("<div class='LoadingOverlay' />"); 
}

然後使用CSS來控制它是如何呈現的。

.LoadingOverlay 
{ 
    z-index:1000; 
    position:fixed; 
    width:124px; 
    height:124px; 
    left:50%; 
    top:50%; 
    margin-left:-62px; 
    margin-right:-62px; 
    background-image:url(/images/loading51.gif); 
}

通常我做一次新的AJAX調用完成

$(".LoadingOverlay").remove();

但它看起來像你會被加載了新的一頁一次預載完成，這樣你就不會需要這個。

來源

2012-03-26 16:14:25 Dave

感謝您的回覆，但我必須插入這個： – Giorgio 2012-03-26 16:59:55

謝謝，但我需要一個完整的代碼包含在我的，因爲我是新手在Jquesry ..感謝 – Giorgio 2012-03-26 18:01:31

已更新，以顯示插入append（）調用的位置。將CSS放入CSS文件中。你不需要remove（）調用。 – Dave 2012-03-26 18:20:20

jQuery使用預加載器進行平滑頁面轉換

回答

相關問題