Как узнать, когда браузер завершил обработку изображения после его загрузки?

Question

Когда объект изображения создан, он может знать, когда он полностью загружен с использованием свойства «complete» или «onload», тогда это изображение обработано (например, изменение размера) с помощью некоторого времени, которое может быть несколько секунд в большие файлы.
Как узнать, когда браузер закончил процесс изображение после его загрузки?

EDIT: В примерах можно увидеть задержку между «полным» сообщением и внешним видом изображения, я хочу избежать этого.

Пример Ussing метод "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.

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 секунды, чтобы обработать изображение, в то время как на моем Chrome, кажется, что изображение уже обрабатывается, когда пожары OnLoad событий.

Answer 2

Там нет надежного способа узнать - Ваш браузер может продолжать выполнять произвольный Javascript или выполнения встроенных функций (например, изменение размера окна браузера), которые могут прямо или косвенно повлиять на изображение и заставить его либо перерисовываться, либо, по-видимому, не заканчивать рисование на некоторое время.

Вы можете подключиться к конкретным событиям на протяжении жизни изображения, но, строго говоря, «завершение» происходит только при закрытии окна браузера.