如何檢測 web 頁面的所有內容是否已加載

Question

有沒有辦法檢測 web 頁面上的所有資源是否已加載？ 即使我可以檢測到所有圖像都已完全加載，這也會有很大幫助。 我的情況是這樣的：

I have an iframe in a page and inside the iframe, there is a function the calls window.print(), which will print the contents of the iframe. iframe 的內容是在單擊 iframe 的父級中的按鈕時生成的。 此按鈕還負責在生成內容后立即調用 iframe 內部的打印 function。

問題是一旦單擊按鈕，就會生成 html，然后調用 window.print() 來顯示打印預覽 window。 但這發生得太快了，圖像還沒有加載，所以打印預覽 window 顯示空圖像。

我試圖在調用 window.print() 之前檢查是否所有圖像都已加載，但我不確定該怎么做。 我嘗試了一個while循環，檢查完整的屬性，例如：

var img = document.getElementById("myImg");
while (!img.complete) {
}

window.print();

但它最終陷入無限循環。

任何想法我有什么選擇？

Answer 1

我碰巧有一個用於 gif 加載器的腳本，它可能會幫助你：

 var gif = new Image(); gif.src = 'https://media.giphy.com/media/HoaHfvovCLSvu/giphy.gif'; gif.onload = function() { console.log("Image 1 ready to append"); document.querySelector('.bg-image').src = gif.src; };

 <div class="bg-container"> <img class="bg-image" src="https://placekitten.com/200/300" alt="Banner" /> </div>

在您的情況下，您可以執行 foreach 並檢查是否已加載所有圖像：

 var images = document.querySelectorAll('.bg-image'); var counter = 0; images.forEach(function(image) { var gif = new Image(); gif.src = 'https://placekitten.com/200/300'; gif.onload = function() { console.log("Image ready to append"); image.src = gif.src; counter++; if (counter === images.length) { doPrint(); } } }); function doPrint() { console.log("Image ready to print"); }

 <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" />

或 ES6 Promise：

 var images = document.querySelectorAll('.bg-image'); function appendImages(image, cb) { setTimeout(() => { var gif = new Image(); gif.src = 'https://placekitten.com/200/300'; gif.onload = function() { console.log("Image ready to append"); image.src = gif.src; cb(); } //delay }, 100); } var requests = [...images].map((image) => { return new Promise((resolve) => { appendImages(image, resolve); }); }) function doPrint() { console.log("Image ready to print"); } Promise.all(requests).then(() => doPrint());

 <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" /> <img class="bg-image" src="" alt="default" />

Answer 2

Jquery 文檔准備好在這種情況下應該可以工作：

$( document ).ready(function() {
console.log( "ready!" );
});