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

Question

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) 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.

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 = "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 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.

But one big issue with method is that it is synchronous, and thus will block your scripts during all the time the Image is processed.

The HTMLImageElement interface has been recently expanded to include a decode() method, which should allow us to wait until the image is ready to be drawn, just like you wanted. However, from early tests I found this method quite deceptive, but it may be due to buggy 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);
}