javascript - identify image paint complete in browser -


incase of high resolution image load in browser, after network got image server. browser taking time display them paints gradually.

how can identify paint job complete browser?

http://postimg.org/image/txm6e94jz/ - check image.

there image in home page half rendered, event can use, see image rendered fully?

use window.requestanimationframe catch moment when image rendered:

function imagerenderedcallback() {    alert("image rendered callback executed");  };  function imagerenderingstarted() {    requestanimationframe(imagerenderedcallback);  };    // attach handler 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. secret silky smooth javascript animation! article explanations of what is , how work with requestanimationframe.


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -