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
Post a Comment