Wie erfahre ich, wann der Browser die Verarbeitung eines Bildes nach dem Laden beendet hat?

Wenn ein Bildobjekt erstellt wird, kann mithilfe der Eigenschaft "complete" oder der Methode "onload" festgestellt werden, wann es vollständig geladen ist, dass dieses Bild mit einer gewissen Zeit verarbeitet wurde (z. B. durch Ändern der Größe), die einige Sekunden lang sein kann Dateien.
Wie Sie wissen, wann der Browser auf @ beendet iProzes ein Bildnach dem Laden?

EDIT: In Beispielen wird eine Verzögerung zwischen der Meldung "Vollständig" und dem Erscheinungsbild des Bildes angezeigt. Ich möchte dies vermeiden.

Beispiel für die Verwendung der Methode "onload":

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);
	}

Beispiel mit der Eigenschaft "complete":

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: Dank der Antwort von @ Kaiido habe ich diese Vorsichtsmaßnahme getroffen, um den Bildprozess abzuwarten.

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>

Antworten auf die Frage(4)

Ihre Antwort auf die Frage