画像を読み込んだ後、ブラウザが画像の処理を終了するタイミングを知るには？

Question

イメージオブジェクトが作成されたときに、「完全」プロパティまたは「onload」メソッドを使用していつ完全にロードされたかを知ることができます。その後、このイメージはある時間を使用して処理（サイズ変更など）大きなファイル。
ブラウザが終了したら、のプロセスイメージをロードした後に、を入力してください。

編集：例では、「完全な」メッセージと画像の外観の間に時間差があることが分かります。これを避けたいと思います。

"onloadイベント" 方法ウッシング例： "完全な" プロパティを使用して

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 }

例：

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：ありがとう@のKaiidoの応答を私 画像処理を待つためのこの解決策を作った。

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

これは片道です。

CanvasContext2D drawImageメソッドは同期です。 このメソッドを使用するには、ブラウザがイメージを完全にレンダリングする必要があります。

したがって、waitBIGimageメソッドの待機方法として使用できます。私のFirefoxで

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

私のChromeで、ときにonloadイベントが発生画像がすでに処理されているようだ一方で、それは、画像を処理するのに約1秒かかります。

Answer 2

知る信頼できる方法はありません - あなたのブラウザは、任意のJavaScriptまたは機能（すなわち、ブラウザウィンドウのサイズ変更）に建てられた実行を実行し続けることができ、直接または間接的に影響を与えることができましたイメージを再描画するか、しばらく描画を終了しないように見えるようにします。

イメージの存続期間中に特定のイベントにフックすることができますが、厳密に言えば、ブラウザウィンドウを閉じると「終了」するだけです。