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.