的jQuery/JavaScript的等待頁面加載，但沒有短於規定時間

Question

我遇到了以下問題：

我想顯示的覆蓋，直到頁面加載完全，它工作得很好。 問題是，在快速連接時，疊加層會立即消失，這不是我想要實現的。

我試圖做到這一點的方式如下：

$(document).ready(function(){ 
    setTimeout(function(){ 
     $(window).load(function(){ 
      $('#overlay').fadeOut(1200); 
     }); 
    },1500); 
}); 

這似乎合乎邏輯的我。沒有工作。我用setInterval取代了setTimeout，也沒有工作。我把$(window).load ......等。在一個函數中調用它與外部的setTimeout，沒有成功。對於那個額外的計時器來說，最好的結果是，瀏覽器完全忽略了它;大多數時候覆蓋層只停留在那裏，沒有任何反應。

我錯過了什麼？

Answer 1

你當然不需要$(window).load...在setTimeout函數內。實際上，將它放入超時範圍將確保它永遠不會執行，因爲window.load事件在將函數分配給覆蓋圖之前已經被觸發。

---

我已根據您的反饋調整了我的代碼。基本原則是確定準備好所需的時間，然後根據已經過的時間減少超時。這樣，最快的連接仍然會延遲，而最慢的連接將立即執行淡出。

Live Demo

//Put this line in a script tag as high up on the page as possible 
window.timeInMs = Date.now(); 

代替的document.ready其中文檔被加載其全部頁面加載（幀，對象，圖像）之後執行，使用window.load之後執行 - src 。

$(window).load(function(){ 
    var maxTimeout = 1500;//Everyone waits at least this amount, including fast browsers. 

    //Compute the elapsed time, default to 0 if more than maxTimeout has elapsed. 
    var remainingTime = Math.max(maxTimeout - (Date.now() - window.timeInMs), 0); 

    setTimeout(function(){ 
     $('#overlay').fadeOut(1200); 
    }, remainingTime); 

});