如何检测图像何时在浏览器中完成渲染(即绘制)？

Question

在Web应用程序上,我需要处理大量高分辨率图像,这些图像会动态添加到DOM树中.它们已预先加载,然后添加到页面中.

检测这样的图像何时完成加载是一回事,为此我使用了该load事件,但是如何使用Javascript 检测它何时在浏览器中完成呈现？使用高分辨率图像时,实际的绘画过程可能需要花费大量时间,因此了解它何时结束非常重要.

Answer 1

我用requestAnimationFrame来做这个伎俩.加载图像后,它将在下一个动画帧期间渲染.因此,如果您等待两个动画帧,您的图像将被渲染.

function rendered() {
    //Render complete
    alert("image rendered");
}

function startRender() {
    //Rendering start
    requestAnimationFrame(rendered);
}

function loaded()  {
    requestAnimationFrame(startRender);
}

见http://jsfiddle.net/4fg3K/1/

Answer 2

我有同样的问题。我已经创建了带有进度条的预加载器页面。当图像加载时，白色背景预加载页面平滑消失opacity: 0，但图像仍然没有渲染。

setInterval当图像加载（但未渲染）时，我终于使用了, 。在间隔中我检查naturalWidth和naturalHeight属性（支持：IE9+）。最初它等于0，并且当渲染图像时它显示其当前的宽度和高度。

const image = document.getElementById('image');

image.src = "https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-1.jpg";

image.onload = function () {
  console.log('Loaded: ', Date.now());
  const interval = setInterval(() => {
    if (image.naturalWidth > 0 && image.naturalHeight > 0) {
      clearInterval(interval);
      rendered();
    }
  }, 20);
}

function rendered() {
  console.log('Rendered: ', Date.now());
}

img{
  width: 400px;
}

<img id="image"/>

Answer 3

您需要标签onload上的事件<img>。例如：

function loadImage () {
  alert("Image is loaded");
}
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">

来源

如果图像是另一个元素的背景，则在后台加载图像（使用简单的 Ajax GET 请求），当结果返回时，在加载后设置背景。