如果浏览器中加载高分辨率图像,即使网络从服务器获取图像后也是如此。浏览器在逐渐绘制时需要一些时间来显示它们。
如何通过浏览器识别此绘制工作已完成?
http://postimg.org/image/txm6e94jz/ - 检查此图像。
主页中的图像已渲染一半,我可以使用什么事件来查看完全渲染的图像?
使用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);
});Run Code Online (Sandbox Code Playgroud)
#my-image {
width: 1680px;
height: 1260px
}Run Code Online (Sandbox Code Playgroud)
<body>
<img id="my-image" src="http://www.hdwallpapers.in/download/mount_fuji_japan_highest_mountain-">
</body>Run Code Online (Sandbox Code Playgroud)
请参阅请求动画帧。流畅 JavaScript 动画的秘密!文章解释了requestAnimationFrame是什么以及如何使用 requestAnimationFrame。