在頁面完全加載之前顯示加載圖像

Question

我想在加載整個頁面的內容之前顯示加載圖像。如何實現這一目標？我正在ASP.NET中工作。

謝謝。 NLV

Answer 1

您最初應該在你的HTML顯示的圖像，然後把它隱藏在頁面加載時，像這樣：

的Javascript：

window.onload = function() { 
    document.getElementById('loadingImageIDHere').style.display = 'none'; 
}; 

編輯：OP標記這個問題爲「JavaScript的'，而不是'jquery'！

Answer 2

您需要使用Javascript來完成此操作。我的首選是jQuery。 jQuery有一個函數在頁面完全加載時執行，因此您可以將主內容div設置爲顯示css屬性：none，然後當DOM準備就緒時，可以使用jQuery顯示內容：

$(document).ready(function() { 
    $("#myContent").css("display", "block"); 
}); 

Answer 3

我個人的偏好是預先在每個頁面上顯示一個加載圖像，然後使用jQuery在頁面加載後隱藏圖像。您是否想要使用$(document).ready或$(window).load取決於您。

// assumes you already have a DIV#preloader container on your page centered with a loading image inside 
// of it 
$(document).ready(function() { 
    $("#preloader").hide(); 
}); 

$(window).load(function() { 
    $("#preloader").hide(); 
});