Skip to content
Advertisement

Identify image paint complete in browser

In case of a high resolution image load in browser, even after network got the image from server. Browser taking some time to display them as it paints gradually.

How can I identify this paint job is complete by browser?

http://postimg.org/image/txm6e94jz/ – check this image.

There image in home page is half rendered, what event can I use, to see that image rendered fully?

Advertisement

Answer

Use window.requestAnimationFrame to catch moment when image are rendered:

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>

See requestAnimationFrame. The secret to silky smooth JavaScript animation! article with explanations of what is and how to work with requestAnimationFrame.

Advertisement