有沒有辦法創建一個加載屏幕，但限制它消失之前的時間？

我想創建一個HTML加載屏幕，隱藏大量的圖像，直到他們至少部分加載。有沒有辦法創建一個加載屏幕，但限制它消失之前的時間？

下面的代碼行目前正常工作，但由於圖像的大小，我需要一種方法來限制瀏覽器嘗試預加載的時間量。

$(window).load(function(){ 
    $("#loadingScreen").fadeOut("slow"); 
    $('#content').fadeIn("slow"); 
});

在試圖這樣做，我增加了以下內容：

$("#loadingScreen").delay(3000).fadeOut("slow"); 
$('#content').delay(3000).fadeIn("slow");

我的理由是，瀏覽器會首先嚐試加載所有圖像和3秒，即使圖像不後滿載時，加載屏幕將消失。這樣，當第一次訪問該網站時，他或她將在加載屏幕上花費最多3秒，並且在隨後的訪問中，他或她將花費更少的時間，因爲圖像將被緩存到他們的計算機上。

單獨，兩組代碼工作，但是當我嘗試將它們一起使用時，只有第二組代碼運行。我究竟做錯了什麼？謝謝！

標記：

<body> 
    <div id="loadingScreen"> 
     <img src="img/loadingIcon.gif"> 
    </div> 

    <div id="content" style="display: none"> 
     <img src="img/image1.jpg"> 
     <img src="img/image2.jpg"> 
     <img src="img/image3.jpg"> 
    </div> 
</body>

來源

2013-01-11 user1549224

你能後的標記？這將有助於我們提供解決方案。 – dunli

您是否嘗試過：

$("#loadingScreen").delay(3000).fadeOut("slow", function(){ 
    $('#content').fadeIn("slow"); 
});

來源

2013-01-11 00:29:54 dunli

不幸的是，我不這麼認爲，但我可以通過簡單地編寫一個if else語句來修復它，並讓這兩組代碼分開運行。雖然謝謝！ – user1549224

有沒有辦法創建一個加載屏幕，但限制它消失之前的時間？

回答

相關問題