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:
JavaScript
x
11
11
1
function imageRenderedCallback() {2
alert("Image Rendered Callback executed");3
};4
function imageRenderingStarted() {5
requestAnimationFrame(imageRenderedCallback);6
};7
8
// Attach handler for load event. 9
document.getElementById('my-image').addEventListener('load', function(){10
requestAnimationFrame(imageRenderingStarted);11
});JavaScript
1
4
1
#my-image {2
width: 1680px;3
height: 1260px4
}JavaScript
1
3
1
<body>2
<img id="my-image" src="http://www.hdwallpapers.in/download/mount_fuji_japan_highest_mountain-">3
</body>See requestAnimationFrame. The secret to silky smooth JavaScript animation! article with explanations of what is and how to work with requestAnimationFrame.