How do I know when the browser finished processing the image after it was downloaded?

Question

When an image object is created, it can know when it is fully loaded using the "complete" or "onload" property, then this image is processed (for example, resizing) with some time, which can be a few seconds in large files.
How do I know when the browser finishes processing the image after it is downloaded ?

EDIT: In the examples, you can see the delay between the "full" message and the appearance of the image, I want to avoid this.

An example of using the "onload" method:

var BIGimage; putBIGimage(); function putBIGimage(){ BIGimage=document.createElement("IMG"); BIGimage.height=200; BIGimage.src="http://orig09.deviantart.net/5e53/f/2013/347/f/d/i_don_t_want_to_ever_leave_the_lake_district_by_martinkantauskas-d6xrdch.jpg"; BIGimage.onload=function(){waitBIGimage();}; } function waitBIGimage(){ console.log("Complete."); document.body.appendChild(BIGimage); } 

An example of using the "complete" property:

 var BIGimage; putBIGimage(); function putBIGimage(){ BIGimage=document.createElement("IMG"); BIGimage.height=200; BIGimage.src="http://orig09.deviantart.net/5e53/f/2013/347/f/d/i_don_t_want_to_ever_leave_the_lake_district_by_martinkantauskas-d6xrdch.jpg"; waitBIGimage(); } function waitBIGimage(){ if (!BIGimage.complete){ console.log("Loading..."); setTimeout(function(){ waitBIGimage(); },16); } else { console.log("Complete."); document.body.appendChild(BIGimage); } } 

EDIT: Thanks @Kaiido answer I made this solution to wait for image processing.

 var imagesList=["https://omastewitkowski.files.wordpress.com/2013/07/howard-prairie-lake-oregon-omaste-witkowski-owfotografik-com-2-2.jpg", "http://orig03.deviantart.net/7b8d/f/2015/289/0/f/0ffd635880709fb39c2b69f782de9663-d9d9w6l.jpg", "http://www.livandiz.com/dpr/Crater%20Lake%20Pano%2016799x5507.JPG"]; var BIGimages=loadImages(imagesList); onLoadImages(BIGimages,showImages); function loadImages(listImages){ var image; var list=[]; for (var i=0;i<listImages.length;i++){ image=document.createElement("IMG"); image.height=200; image.src=listImages[i]+"?"+Math.random(); list.push(image); } return list; } function showImages(){ loading.style.display="none"; for (var i=0; i<BIGimages.length;i++){ document.body.appendChild(BIGimages[i]); } }; function onLoadImages(images,callBack,n) { if (images==undefined) return null; if (callBack==undefined) callBack=function(){}; else if (typeof callBack!="function") return null; var list=[]; if (!Array.isArray(images)){ if (typeof images =="string") images=document.getElementById(images); if (!images || images.tagName!="IMG") return null; list.push(images); } else list=images; if (n==undefined || n<0 || n>=list.length) n=0; for (var i=n; i<list.length; i++){ if (!list[i].complete){ setTimeout(function(){onLoadImages(images,callBack,i);},16); return false; } var ctx = document.createElement('canvas').getContext('2d'); ctx.drawImage(list[i], 0, 0); } callBack(); return true; } 

 <DIV id="loading">Loading some big images...</DIV> 

Answer 1

Here is one way.

The CanvasContext2D drawImage method is synchronous. Before using this method, the browser must fully display the image.

That way you can use it as a wait method in your waitBIGimage method.

 var BIGimage; putBIGimage(); function putBIGimage() { BIGimage = document.createElement("IMG"); BIGimage.height = 200; BIGimage.src = "https://upload.wikimedia.org/wikipedia/commons/c/cf/Black_hole_-_Messier_87.jpg?r=" + Math.random(); BIGimage.onload = waitBIGimage; BIGimage.onerror = console.error; } function waitBIGimage() { // only for demo // we've got to also log the time since even the console.log method will be blocked during processing var start = performance.now(); console.log('waiting', start); // this is all needed var ctx = document.createElement('canvas').getContext('2d'); ctx.drawImage(this, 0, 0); // demo only var end = performance.now(); console.log("Complete.", end); console.log('it took ${end - start}ms') // do your stuff document.body.appendChild(BIGimage); } 

On my Firefox, image processing takes about 1 second, while on my Chrome, the image seems to be already processed when the onload event occurs.

But one big problem of the method is that it is synchronous and thus blocks your scripts during the whole image processing time.

The HTMLImageElement interface has recently been expanded to include the decode decode() method , which should allow us to wait for the image to be ready for drawing, just as you wanted. However, from early tests, I found this method quite deceiving, but this may be due to erroneous early implementations:

 var BIGimage; putBIGimage(); function putBIGimage() { BIGimage = document.createElement("IMG"); BIGimage.height = 200; BIGimage.src = "https://upload.wikimedia.org/wikipedia/commons/c/cf/Black_hole_-_Messier_87.jpg?r=" + Math.random(); BIGimage.onload = e => console.log('load event', performance.now()); BIGimage.decode().then(waitBIGimage); BIGimage.onerror = console.error; } function waitBIGimage() { var start = performance.now(); // only to see if it worked fine var ctx = document.createElement('canvas').getContext('2d'); ctx.drawImage(BIGimage, 0, 0); // demo only var end = performance.now(); console.log('it took ${end - start}ms to draw') // do your stuff document.body.appendChild(BIGimage); } 

Answer 2

There is no reliable way to find out - your browser can continue to execute arbitrary javascript or perform built-in functions (for example, resizing the browser window) that can directly or indirectly affect the image and cause it to redraw or until you finish drawing for a while.

You can connect to certain events throughout the life of the image, but, strictly speaking, "completion" occurs only when the browser window is closed.