识别浏览器中完成的图像绘制

Nav*_*mar 7 javascript image

如果浏览器中加载高分辨率图像,即使网络从服务器获取图像后也是如此。浏览器在逐渐绘制时需要一些时间来显示它们。

如何通过浏览器识别此绘制工作已完成?

http://postimg.org/image/txm6e94jz/ - 检查此图像。

主页中的图像已渲染一半,我可以使用什么事件来查看完全渲染的图像?

And*_*yko 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);
});
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