如何检测是否加载了网页的所有内容

Question

有没有办法检测是否加载了网页上的所有资源？即使我只能检测到所有图像都已完全加载，这也会有很大帮助。我的情况是这样的：

我在页面中有一个 iframe，在 iframe 内部，有一个调用 window.print() 的函数，它将打印 iframe 的内容。 iframe 的内容是在单击 iframe 父级中的按钮时生成的。此按钮还负责在生成内容后立即调用 iframe 内的打印功能。

问题是单击按钮后，会生成 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!" );
});

如何检测是否加载了网页的所有内容

How to detect if all contents of a web page are loaded

html

javascript

iframe