如何檢查頁面是否已完全加載（腳本和所有）？

Question

我知道，這里有很多關於它的回答問題。 不過，我的情況有點不同，我還沒有找到答案。

我試圖在頁面完全加載后顯示一條消息。 使用$(document).ready, document.readyStateChange ，我不在乎。

問題是文檔在需要執行的腳本中間准備好。 我嘗試使用window.onload （它是 jQuery 等價物）來做到這一點，但它會在一些圖像/元素出現之前向我顯示消息。 有沒有辦法等待它執行然后才顯示消息？ （請記住，我可能需要在同一頁面中執行多次）。

提前致謝！

Answer 1

確保頁面真正完成加載並不總是一件容易的事。 特別是對於通過 Ajax 依賴內容的頁面，以及異步加載的其他資產（每個資產都可以獨立加載並與其他資產並行加載，例如圖像）。

我對處理這種情況的建議：

創建一些全局 Deferred 對象（一個 Promise）並確保只有在它所依賴的所有內容都“准備好”后才會解決它。

最小的例子：

// start your web app code..
var p1 = new Promise();
var p2 = new Promise();
var p3 = new Promise();

// when all dependencies are done loading, means the page is truly "ready"
Promise.all([p1, p2, p3])
  .then(() => { 
       // page done loading
  });

// somewhere in the code...wait for Ajax content to load
// and resolve "p1" after the content has loaded
p1.resolve();

// somewhere in the code...wait for some other Ajax content to load
// and resolve "p2" after the content has loaded
p2.resolve();

// somewhere in the code...wait for all the images to load 
// (http://stackoverflow.com/a/1977898/104380)
// and resolve "p3"
p3.resolve();

關鍵是您需要手動確保所有異步的不同部分都已完全加載。 這是一項乏味的工作，但它是一個非常可靠的解決方案。

Answer 2

聽起來您需要讓代碼作為必須首先執行的任何腳本的回調運行，而不是將其綁定到document.ready事件。 如果您可以發布一些代碼，我可能會提供更多幫助。

Answer 3

bianca，為什么不嘗試從需要運行的腳本中加載消息呢？ 在腳本末尾觸發消息，以便您知道需要運行的腳本已完成。

Answer 4

Javascript 按照編寫的順序執行。 我猜你當前的代碼在加載 HTML 之后運行（即 window.onload），如果你的消息是你的 Javascript 中調用的最后一件事。

唯一的例外是，如果您執行異步 XMLHttpRequest 調用，那么您將希望有一個設置為“false”的變量，並且當 XMLHttpRequest 完成時將該變量設置為“true”。 然后，您可以使用 setTimeout 來監聽該變量何時為真。

Answer 5

window.onload是解決方案。 window.onload在 DOM 准備好並且所有資源也加載到瀏覽器時觸發。 換句話說，它會在瀏覽器的圓圈停止旋轉時觸發。