如何知道瀏覽器何時完成加載後處理圖像？

創建圖像對象時，可以使用「完整」屬性或「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 }

編輯：感謝@ 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>

來源

2016-09-17 Arnau Castellví

第一個例子不返回預期結果嗎？ – guest271314

第一種方法是首選 - 如果它不適合你，那麼你做錯了 –

在例子中可以看到「完整」的消息和圖像的外觀之間的滯後，我想避免這種情況。 –

這是一種方法。

CanvasContext2D drawImage方法是同步的。在能夠使用此方法之前，瀏覽器必須完全呈現圖像。

因此，您可以在waitBIGimage方法中將其用作等待方法。

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

在我的Firefox瀏覽器需要大約1秒處理圖像，而在我的瀏覽器，它似乎圖像已被處理onload事件觸發時。

來源

2016-09-17 06:53:25 Kaiido

謝謝，我編輯我的問題，我做了一個溶劑:) –

@ArnauCastellví很高興它幫助你，但你不應該依賴這樣的完整狀態。首先，你會對你的函數做很多無用的調用，而js則從Event模型中獲得它的優勢。另外，如果圖像加載失敗，complete可能會設置爲true，但您無法從此屬性中確定它（儘管您可以檢查naturalWidth屬性）。通過監聽所有圖像onload和onerror事件，增加一個計數器變量，並且只有當計數器達到要加載的圖像總數時才觸發最終回調，你應該完成什麼。 – Kaiido

嗯，是的，這只是一個概念測試，我仍然在努力。謝謝:) –

有知道沒有可靠的方法 - 你的瀏覽器可以繼續執行任意JavaScript或執行內置函數（即調整瀏覽器窗口的），它可以直接或間接地影響圖像，並導致它重繪，或似乎沒有完成繪圖一段時間。

您可以在圖像的生命週期中掛鉤特定事件，但嚴格來說，「完成」只發生在瀏覽器窗口關閉時。

來源

2016-09-17 06:16:22 blueberryfields

如何知道瀏覽器何時完成加載後處理圖像？

回答

相關問題