Wie kann man wissen, wann der Browser fertig ist, um ein Bild nach dem Laden zu bearbeiten?

Question

Wenn ein Image-Objekt erstellt wird, kann wissen, wann es vollständig geladen ist, indem es die "complete" -Eigenschaft oder die "onload" -Methode verwendet. Dann hat dieses Bild einige Zeit verarbeitet, z große Dateien.
Wie zu wissen, wenn der Browser zu Prozess ein Bild nach dem Laden?

EDIT: In Beispielen kann eine Verzögerung zwischen "vollständige" Nachricht und das Aussehen des Bildes sehen, ich möchte dies vermeiden.

Beispiel Ussing "onload" Methode:

var BIGimage; 
 
\t putBIGimage(); 
 
\t function putBIGimage(){ 
 
\t \t BIGimage=document.createElement("IMG"); 
 
\t \t BIGimage.height=200; 
 
\t \t 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"; 
 
\t \t BIGimage.onload=function(){waitBIGimage();}; 
 
\t } 
 
\t function waitBIGimage(){ 
 
\t \t \t console.log("Complete."); 
 
\t \t \t document.body.appendChild(BIGimage); 
 
\t }

Beispiel mit "complete" Eigenschaft:

var BIGimage; 
 
\t putBIGimage(); 
 
\t function putBIGimage(){ 
 
\t \t BIGimage=document.createElement("IMG"); 
 
\t \t BIGimage.height=200; 
 
\t \t 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"; 
 
\t \t waitBIGimage(); 
 
\t } 
 
\t function waitBIGimage(){ 
 
\t \t if (!BIGimage.complete){ 
 
\t \t \t console.log("Loading..."); 
 
\t \t \t setTimeout(function(){ 
 
\t \t \t \t waitBIGimage(); 
 
\t \t \t },16); 
 
\t \t } else { 
 
\t \t \t console.log("Complete."); 
 
\t \t \t document.body.appendChild(BIGimage); 
 
\t \t } 
 
\t }

EDIT: Dank der Antwort des @ Kaiido ICH habe diese Lösung gemacht, um die Bilder abzuwarten.

var imagesList=["https://omastewitkowski.files.wordpress.com/2013/07/howard-prairie-lake-oregon-omaste-witkowski-owfotografik-com-2-2.jpg", 
 
\t \t "http://orig03.deviantart.net/7b8d/f/2015/289/0/f/0ffd635880709fb39c2b69f782de9663-d9d9w6l.jpg", 
 
\t \t "http://www.livandiz.com/dpr/Crater%20Lake%20Pano%2016799x5507.JPG"]; 
 
var BIGimages=loadImages(imagesList); 
 
onLoadImages(BIGimages,showImages); 
 

 
function loadImages(listImages){ 
 
\t var image; 
 
\t var list=[]; 
 
\t for (var i=0;i<listImages.length;i++){ 
 
\t \t image=document.createElement("IMG"); 
 
\t \t image.height=200; 
 
\t \t image.src=listImages[i]+"?"+Math.random(); 
 
\t \t list.push(image); 
 
\t } 
 
\t return list; \t \t 
 
} 
 

 
function showImages(){ 
 
\t loading.style.display="none"; 
 
\t for (var i=0; i<BIGimages.length;i++){ 
 
\t \t document.body.appendChild(BIGimages[i]); 
 
\t } 
 
}; 
 

 
function onLoadImages(images,callBack,n) { 
 
\t if (images==undefined) return null; 
 
\t if (callBack==undefined) callBack=function(){}; 
 
\t else if (typeof callBack!="function") return null; 
 
\t var list=[]; 
 
\t if (!Array.isArray(images)){ 
 
\t \t if (typeof images =="string") images=document.getElementById(images); 
 
\t \t if (!images || images.tagName!="IMG") return null; 
 
\t \t list.push(images); 
 
\t } else list=images; 
 
\t if (n==undefined || n<0 || n>=list.length) n=0; 
 
\t for (var i=n; i<list.length; i++){ 
 
\t \t if (!list[i].complete){ 
 
\t \t \t setTimeout(function(){onLoadImages(images,callBack,i);},16); 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t var ctx = document.createElement('canvas').getContext('2d'); 
 
\t \t ctx.drawImage(list[i], 0, 0); 
 
\t } 
 
\t callBack(); 
 
\t return true; 
 
}

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

Answer 1

Hier ist eine Möglichkeit.

CanvasContext2D drawImage Methode ist synchron. Bevor Sie diese Methode verwenden können, muss der Browser das Bild vollständig rendern.

So können Sie es als eine Wartemethode in Ihrer waitBIGimage Methode verwenden.

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

Auf meinem Firefox dauert es etwa 1 Sekunde, um das Bild zu verarbeiten, während auf meinem Chrome, so scheint es, das Bild wird bereits bearbeitet, wenn das onload-Ereignis ausgelöst wird.

Answer 2

Es gibt keine zuverlässige Möglichkeit, zu wissen - Ihr Browser Funktionen beliebige Javascript oder gebauten auszuführen fortgesetzt werden kann (dh des Browserfensters Ändern der Größe), die direkt oder indirekt die beeinflussen können Bild und verursachen, dass es entweder neu gezeichnet wird, oder scheint, für eine Weile nicht zu beenden.

Sie können bestimmte Ereignisse während der Lebensdauer eines Bildes festlegen, aber streng genommen geschieht "finish" nur, wenn das Browserfenster geschlossen wird.