Question

即使在网络从服务器获取图像后，浏览器中也会出现高分辨率图像负载。浏览器需要一些时间来逐渐显示它们。

如何通过浏览器确定此绘制作业是否已完成？

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

主页中的图像是半渲染的，我可以使用什么事件来查看完全渲染的图像？

Answer 1

使用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. The secret to silky smooth JavaScript animation!文章，解释什么是和如何使用 requestAnimationFrame 。

Answer 2

您可以为＆＃39;加载＆＃39;添加事件监听器。事件

document.getElementById('imgId').onload = function (){ /* image loaded */ }

Answer 3

这与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
      })
   })
})

javascript - 在浏览器中识别图像画完成

3 个答案: