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

来自mdn，

在内容重新绘制时触发MozAfterPaint事件屏幕并提供有关重新绘制内容的信息。它是主要用于研究性能优化

希望您这样做是为了衡量渲染图像的性能。

Answer 4

更新：请勿使用此方法 - 在图片尺寸设置为默认值以外的情况下不起作用

您可以将元素的高度设置为自动（具有固定宽度），并且在超时时继续检查元素的尺寸是否与图像的自然尺寸匹配。这不是最好的解决方案，但如果你真的需要在渲染之后做一些事情，而不是在加载之后，这是一个很好的选择。

或多或少看起来如此：

//this is NOT a real code
function checkIfRendered(img, onRender) {
    var elRatio = img.width() / img.height();
    var natRatio = img.naturalWidth / img.naturalHeight;

    if (elRatio === natRatio)
        onRender();
    else {
        setTimeout(function() {
            checkIfRendered(imgEl, onRender)
        }, 20);
    }
}

img.onload(checkIfRendered(img, function() { alert('rendered!'); }));

Answer 5

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

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

source

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

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

5 个答案: