Question

是否可以延迟页面渲染，直到下载图像以防止图像在页面被绘制时加载？

干杯！

Answer 1

您可以在图片上使用onload来检测图片的加载时间。

＆＃13;

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

＆＃13;

下面的完整示例，它做了什么：

div名为封面，在下载所有图片之前覆盖您的页面（可能会显示一条消息，请加载）。
JS脚本（此处需要vanilla no jQuery）搜索页面中的所有图像，并使用src中存储的data-src路径为每个图像加载它们。
onload在加载图片时执行，loadCount变量跟踪加载了多少图像，并检查页面中的总数。
当加载的图像数量与页面中的图像数量相同时，隐藏封面并显示页面。

＆＃13;

(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';
  }
};
  });
})()

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 2

您可以执行以下操作。首先在html中将display：none设置为您的身体，这样它就不会显示任何内容，然后在下面的条件中

$(window).on("load", function() {
    //show the body like below
     $("body").fadeIn(500);
});

body {display：none; }

延迟页面渲染，直到下载图像

2 个答案: