javascript - 延迟页面呈现，直到下载图像

Question

是否可以延迟页面呈现，直到图像下载完毕，以防止在绘制页面时加载图像？

干杯!

Answer 1

您可以在图像上使用 onload 来检测它何时加载。

var img = new Image();
img.src = "http://www.mind-coder.com/example.jpg";
img.onload = function() { alert("Height: " + this.height); }

下面的完整示例，它是做什么的:

• 一个名为 cover 的 div，在所有图片下载完成之前覆盖您的页面(可能会显示一条消息，例如请加载)。

• JS 脚本(这里不需要普通的 jQuery)搜索页面中的所有图像并使用存储在 data-src 中的 src 路径加载它们每张图片。

• onload 在加载图像时执行，loadCount 变量跟踪加载了多少图像并检查页面中的总数。

• 当加载的图像数量与页面中的图像数量相同时，隐藏封面并显示您的页面。

(function() {
  var loadCount = 0;
  var imgs = document.querySelectorAll('img');
  imgs.forEach(function(img) {
img.src = img.dataset.src;
img.onload = function() {
  loadCount++;
  if (loadCount === imgs.length) {
    document.getElementById('cover').style.display = 'none';
  }
};
  });
})()

#cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

<div id="cover">cover - loading</div>
<img data-src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley,_California.jpg">
<img data-src="https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG">