如何检测图像何时在浏览器中完成渲染（即绘制）？ [英] How to detect when an image has finished rendering in the browser (i.e. painted)?

问题描述

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

On a web app I need to work with a lot of high-res images, which are dynamically added to the DOM tree. They are pre-loaded, then added to the page.

检测这样的图像何时完成加载是一回事，为此我使用加载事件，但是如何使用Javascript检测浏览器中完成呈现的时间？
使用高分辨率图像时，实际的绘画过程可能需要花费很多时间，知道它何时结束非常重要。

It's one thing to detect when such an image has finished loading, for this I use the load event, but how can I detect when it has finished being rendered within the browser, using Javascript? When working with high resolution images, the actual painting process can take a lot of time and it's very important to know when it ends.

推荐答案

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

I used requestAnimationFrame to do the trick. After image loaded it will be rendered during the next animation frame. So if you wait two animation frame your image will be rendered.

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

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

function loaded()  {
    requestAnimationFrame(startRender);
}

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

这篇关于如何检测图像何时在浏览器中完成渲染（即绘制）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！