顯示加載動畫，而部分頁面通過jQuery加載（）加載（）

Question

在我的網站上，我想通過jQuery的load()函數動態加載「頁面」，我想添加一個加載動畫。

function loadPage(){ 
    $("#content").load("example.html"); 
} 

我會在哪裏把代碼顯示<div id="loading"></div>而jQuery的負載的內容？

在此先感謝。

Answer 1

使用​​的回調函數可以在加載完成時隱藏加載div。

function loadPage(){ 
    $('#loading').show(); 

    $("#content").load("example.html", function() { //calback function 
     $('#loading').hide(); 
    }); 
} 

Answer 2

你可以嘗試這樣的事情：

$(document).ready(function() { 
    $(this).ajaxSend(function() { 
     $(this).append('<div id="loading"></div>'); 
    }).ajaxStop(function() { 
     $('#loading').remove(); 
    }); 
}); 

這將爲所有Ajax調用的工作...

Answer 3

我不知道你想做什麼，但可能你想將內容加載到div。 您應該創建一個CSS類：

.loading { 
    background: url(loading.gif) center center; 
} 

這個類添加到您的div（後你清楚吧）與addClass()當你開始加載，並與removeClass在.load回調將其刪除。