Arnau Castellví Arnau Castellví - 2 months ago 11
Javascript Question

How to know when browser finish to process an image after loading it?

When an image object is created, can know when is fully loaded using the "complete" property, or the "onload" method, then, this image has processed ( resizing for example ) using some time, that can be some seconds in big files.

How to know when browser finish to process an image after loading it?


EDIT: In examples can see a lag between "complete" message and the appearance of the image, I want avoid this.


Example ussing "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);
}





Example using "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 the @Kaiido's response I made this sollution for wait the images process.



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 || typeof callBack!="function") callBack=function(){};
var list=[];
if (!Array.isArray(images)){
if (typeof images =="string") images=documen.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

Here is one way.

CanvasContext2D drawImage method is synchronous. Before being able to use this method, the browser has to completely render the image.

So you can use it as a waiting method in your waitBIGimage 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?" + Math.random();
  BIGimage.onload = waitBIGimage;
}

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 it takes about 1 second to process the image, while on my Chrome, it seems the image is already processed when the onload event fires.