html頁面加載消息

Question

我的HTML頁面加載有點慢，因爲它的jQuery。我想要一個圖像，告訴用戶它正在加載，直到整個頁面被加載。我應該如何去做這件事？
非常感謝提前。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     //my jquery here.... 

    }); 
</script> 

Answer 1

設計頁面時已經包含加載消息，因此當從服務器加載頁面時，消息已顯示。

然後，使用jQuery，你能儘快隱藏消息的頁面已準備就緒：

$(document).ready(function(){ 
    $('#loadingMessage').hide(); 
}); 

Answer 2

嗯，你可以加載，說：「裝載」的圖像，然後加載該文件的腳本的其餘部分由要麼做類似：

var TM_script = document.createElement('script');TM_script.src = 'http://www.yoursite.com/script.js';document.getElementsByTagName('body')[0].appendChild(TM_script); someFunctionInScript(); 

或者，你可以加載圖像，然後提交Ajax請求加載頁面的其餘部分。您甚至可以嘗試在頁面頂部製作動畫GIF或其他圖像，一旦文檔加載（並且您的腳本激活），就可以刪除該圖像。

Answer 3

http://www.jsfiddle.net/dactivo/m4Bxe/

window.onload = function() { 

$("#loading").hide();  

    }; 

的window.onload將等待頁面加載整體。 ready()等待DOM準備就緒，這實際上是中立的。

你可以在閱讀本these jquery docs

「雖然JavaScript提供負載 事件執行代碼，當頁面 呈現，這個事件沒有得到 觸發，直到所有的資產，如 畫面已經完全收到 在大多數情況下，只要DOM層次結構爲 完全構建，就可以運行腳本 。處理程序通過 將.ready（）保證爲 在DOM準備就緒後執行「

Answer 4

賈斯汀的方法將做的伎倆。

確保您優化資源裝載的方式，例如把你的腳本在頁面的底部，所以他們不會阻止HTML渲染

http://developer.yahoo.com/performance/rules.html

Answer 5

有一個背景圖像通過設置css到主體，並刪除文檔中的元素。準備

Answer 6

我知道這是一個相當古老的線程，但儘管是必要的jQuery以下解決方案爲我：

後

先右側，身體標記補充一點：

<div id="loading"> 
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> 
</div> 

然後添加樣式類對於div和圖像以你的CSS：

#loading { 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    position: fixed; 
    display: block; 
    opacity: 0.7; 
    background-color: #fff; 
    z-index: 99; 
    text-align: center; 
} 

#loading-image { 
    position: absolute; 
    top: 100px; 
    left: 240px; 
    z-index: 100; 
} 

最後這個JavaScript添加到您的網頁（最好在你的頁面的結束，成交當然標記之前）：

<script language="javascript" type="text/javascript"> 
$(window).load(function() { 
$('#loading').hide(); }); 
</script> 

然後通過樣式類調整加載圖像的位置和加載div的背景顏色。

這就是它，工作得很好。但是當然你必須在某個地方有一個ajax-loader.gif。

嘗試AJAXLoad他們有一些偉大的動畫GIF的存在.. :)