当浏览器加载高分辨率图片时,即使在网络从服务器获取了图片后,浏览器也需要一些时间逐渐绘制才能将其显示。
我如何确认浏览器已经完成绘制?
http://postimg.org/image/txm6e94jz/ - 查看这张图片。
主页上的图片只绘制了一半,请问有哪个事件可以用来检测图片是否完全绘制?
当浏览器加载高分辨率图片时,即使在网络从服务器获取了图片后,浏览器也需要一些时间逐渐绘制才能将其显示。
我如何确认浏览器已经完成绘制?
http://postimg.org/image/txm6e94jz/ - 查看这张图片。
主页上的图片只绘制了一半,请问有哪个事件可以用来检测图片是否完全绘制?
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。
document.getElementById('imgId').onload = function (){ /* image loaded */ }
这与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
})
})
})