当浏览器加载高分辨率图片时，即使在网络从服务器获取了图片后，浏览器也需要一些时间逐渐绘制才能将其显示。
我如何确认浏览器已经完成绘制？
http://postimg.org/image/txm6e94jz/ - 查看这张图片。
主页上的图片只绘制了一半，请问有哪个事件可以用来检测图片是否完全绘制？
3个回答
4
使用 window.requestAnimationFrame 来捕捉图片渲染完成的时刻：
function imageRenderedCallback() {
alert("Image Rendered Callback executed");
};
function imageRenderingStarted() {
requestAnimationFrame(imageRenderedCallback);
};
// Attach handler for load event.
document.getElementById('my-image').addEventListener('load', function(){
requestAnimationFrame(imageRenderingStarted);
});#my-image {
width: 1680px;
height: 1260px
}<body>
<img id="my-image" src="http://www.hdwallpapers.in/download/mount_fuji_japan_highest_mountain-">
</body>查看requestAnimationFrame。流畅JavaScript动画的秘密！一文，其中解释了什么是和如何使用requestAnimationFrame。
- Andriy Ivaneyko
0
您可以为“load”事件添加事件侦听器。
document.getElementById('imgId').onload = function (){ /* image loaded */ }
- Viktor Kukurba
4
看起来 OP 也想捕获渲染时间。 - Teemu
图像在加载过程中进行渲染，因此事件在图像渲染完成后触发。 - Viktor Kukurba
1这似乎不起作用。这可以帮助我确定图像响应是否通过网络传输。但是，我需要在接收到非常高分辨率的图像后，浏览器逐渐在视图中绘制图像，进行部分加载并最终完成。load对于此情况没有帮助，也就是说无法确定图像在浏览器中是否已经绘制完成。 - Naveen Kumar
请查看此图片：http://postimg.org/image/txm6e94jz/ - 主页上的图片只渲染了一半，我可以使用哪个事件来查看完整的渲染图像？ - Naveen Kumar
0
这与Andriy的解决方案非常相似，但我发现它更可靠一些...但是不够简洁。不过对我来说完成了工作。
// after preloading the image
requestAnimationFrame(function() {
/*
... code to add the image to the dom
*/
requestAnimationFrame(function() {
document.body.offsetWidth // force repaint
requestAnimationFrame(function() {
// image is painted
})
})
})
- Tyler
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接