html頁面加載消息

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

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

    }); 
</script>

來源

2010-10-29 DGT

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

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

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

來源

2010-10-29 22:47:46

這樣只會讓消息顯示，直到DOM被載入，如果目的是要顯示的消息，直到所有的圖像加載，它的更好我的選項：window.onload。 – netadictos 2010-10-31 16:17:12

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

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或其他圖像，一旦文檔加載（並且您的腳本激活），就可以刪除該圖像。

來源

2010-10-29 22:47:54 LostInTheCode

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

window.onload = function() { 

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

    };

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

你可以在閱讀本these jquery docs

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

來源

2010-10-29 22:51:52 netadictos

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

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

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

來源

2010-10-30 02:25:46

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

來源

2010-10-30 02:30:33 bevacqua

我知道這是一個相當古老的線程，但儘管是必要的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的存在.. :)

來源

2013-01-04 04:30:53

html頁面加載消息

回答

相關問題