'在整個網站加載之前加載'div

Question

在加載所有文件（圖像，腳本，js文件）的同時是否有任何方式顯示LOADING DIV？

其實我認爲它可以使用jQuery/AJAX做，但我不知道，因爲我沒有找到任何解決辦法呢。

一個很好的例子是谷歌的Adwords（對於那些你們誰有一個帳戶）。

我的腳本有大量的圖片和js文件的，如果你問我，所以我想展示一些東西給用戶，而一切加載其中有些是相當沉重的。

注：我不認爲是的setTimeout完美的解決方案的原因，而是沒有真正做的工作 - 它只是模仿它。

Answer 1

jQuery有幾個方法可以處理這個問題。我認爲最簡單的方法是創建<div id="loading">並使用高z-index來覆蓋您的頁面。然後，使用

$(window).load(function() { 
    $('#loading').hide(); 
}); 

在文檔完全加載時隱藏它。

注意：這不一定會等到所有的JavaScript方法完成處理。它會在從服務器接收到圖像，JS文件等後觸發。但是，如果你有一個沉重的JS方法來處理頁面（例如，將每個單詞包裝在一個div中，然後對此做一個複雜的算法），那麼你需要在該方法的末尾插入一個回調來隱藏加載對話框。

Answer 2

我通常使用以下方法：將2周的div：一個容器和一個裝載DIV。加載div應該有位置：固定在CSS中，並使其佔據100％的寬度和高度。

上的負載，我想補充：

$("#container").load(url, myFunction); 

其中「URL」是一個HTML 片段（不是一個完整的頁面）應注入容器DIV的路徑。 myFunction是一個函數指針，它應該包含如下內容：

$("#loading").fadeOut(500); 

這會淡化加載div 500毫秒。

請確保您調用$（document）.load（）而不是$（document）.ready（），因爲ready會在加載圖像之前觸發。