使用jQuery加載頁面時顯示動畫

Question

我有一個從數據庫中獲取信息的頁面。它輸出很多信息，所以加載需要幾秒鐘的時間。我確實有一個動畫，但它的行爲並不像我想要的那樣。當用戶點擊一個鏈接時，我希望立即有一個加載動畫，並且直到頁面上的數據實際加載時才顯示。

下面是它實際做的事情： 當我點擊一個鏈接，我等待5秒鐘，然後頁面加載動畫，然後數據加載。問題是我想讓動畫立即運行，而不是等待5秒鐘，然後運行半秒鐘，然後加載數據。

這裏是我當前的jQuery代碼：

$(document).ready(function() { 
    $("#content").hide(); 
    $(window).load(function() { 
    $("#content").show(); 
    $("#content-loading").hide(); 
    }) 
}) 

內容是需要一段時間來加載和內容裝載有加載動畫內容。

Answer 1

$(document).ready()只會在DOM完成下載時運行，基本上當</html>被下載到您的頁面末尾時。如果您的數據庫數據是頁面的一部分，則在DOM準備事件觸發時加載它。同時，$(window).load()將在頁面上的所有資源已加載時觸發;所有的圖像，外部樣式表等。

也許你可以在隱藏內容的數據之前有一個樣式表，然後在你的頁面底部的內部樣式表，在數據之後，使內容顯示和＃內容加載元素隱藏？

否則，您可以通過AJAX或框架以某種方式異步加載數據。

Answer 2

只有在整個頁面加載（包括所有數據庫的東西）之前，您的動畫纔會運行。相反，加載一個只有你的動畫的頁面，以及對db數據的AJAX調用。然後db調用是異步的。

Answer 3

http://fgnass.github.io/spin.js/

看到這，如果你想添加加載.....