javascript 如何检测图像何时在浏览器中完成渲染（即绘制）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14578356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect when an image has finished rendering in the browser (i.e. painted)?
提问by Andrei Oniga
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.
在 Web 应用程序中，我需要处理大量动态添加到 DOM 树的高分辨率图像。它们是预加载的，然后添加到页面中。
It's one thing to detect when such an image has finished loading, for this I use the loadevent, but how can I detect when it has finished being renderedwithin 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.
检测这样的图像何时完成加载是一回事，为此我使用load事件，但是如何使用 Javascript检测它何时在浏览器中完成呈现？处理高分辨率图像时，实际的绘画过程可能需要很多时间，知道何时结束非常重要。
回答by hovitya
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.
我使用 requestAnimationFrame 来解决这个问题。图像加载后，将在下一个动画帧中渲染。因此，如果您等待两个动画帧，您的图像将被渲染。
function rendered() {
//Render complete
alert("image rendered");
}
function startRender() {
//Rendering start
requestAnimationFrame(rendered);
}
function loaded() {
requestAnimationFrame(startRender);
}
回答by Pawe?
I had the same problem. I have created the preloader page with progress bar. When the image is loaded, the white background preloader page disappears smoothly to opacity: 0, but the image is still not rendered.
我有同样的问题。我已经创建了带有进度条的预加载器页面。加载图像时，白色背景预加载页面平滑消失到opacity: 0，但图像仍然没有渲染。
I have finally used the setInterval, when the image is loaded (but not rendered). In the interval I check the naturalWidthand naturalHeightproperties (Support: IE9+). Initialy it equals 0and when the image is rendered it shows its current width and height.
setInterval当图像加载（但未呈现）时，我终于使用了。在间隔中，我检查naturalWidth和naturalHeight属性(Support: 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"/>回答by MIdhun Krishna
from mdn,
从mdn，
The MozAfterPaint event is triggered when content is repainted on the screen and provides information about what has been repainted. It is mainly used to investigate performance optimization
MozAfterPaint 事件在屏幕上重绘内容时触发，并提供有关已重绘内容的信息。主要用于研究性能优化
Hope you are doing this to gauge performance of the rendered image.
希望您这样做是为了衡量渲染图像的性能。
回答by phidias
Update: Do not use this approach - doesn't work in cases where the image dimensions are set to something else than the default
更新：不要使用这种方法 - 在图像尺寸设置为默认值以外的情况下不起作用
You could set the element's height to auto (with a fixed width) and with a timeout keep on checking of the element's dimensions match with the natural dimensions of the image. It's not the best solution but if you really need to do something after rendering and not after loading, it's a good option.
您可以将元素的高度设置为自动（具有固定宽度），并在超时的情况下继续检查元素的尺寸是否与图像的自然尺寸匹配。这不是最好的解决方案，但如果您真的需要在渲染之后而不是在加载之后做一些事情，这是一个不错的选择。
More or less that's how it could look:
或多或少这就是它的样子：
//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!'); }));
回答by AlexStack
You need the onloadevent on the <img>tag. For example:
您需要标签onload上的事件<img>。例如：
function loadImage () {
alert("Image is loaded");
}
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
If the image is the background of another element, load the image in the background (with a simple Ajax GET request) and when the result comes back, set the background after it has been loaded.
如果图像是另一个元素的背景，则在背景中加载图像（使用简单的 Ajax GET 请求），当结果返回时，在加载后设置背景。
