мгновенно запускается функция загрузки объекта изображения

Question

Я создаю несколько объектов изображения, и когда я настраиваю настройку сети в Dev Tools, я вижу, что функции загрузки загружаются до того, как мои изображения будут полностью загружены.

Я действительно не могу найти решение. Мой код:

function imgObjects(data) { 
    for (var i in data) { 
     img[data[i].id] = new Image(); 
     img[data[i].id].onload = imgReady(); 
     img[data[i].id].name = data[i].name; 
     img[data[i].id].src = data[i].image; 
    } 
} 

function imgReady() { 
    imgReadyCount++; 
    console.log('Count: ', imgReadyCount); 
} 

Мне кажется, вы знаете ответ, пожалуйста, предоставьте его в vanilla js, спасибо!

Answer 1

Проблема заключается в назначении обработчика события.

img[data[i].id].onload = imgReady();//you call the function here 

Вместо этого он должен быть

img[data[i].id].onload = imgReady; //note that the handle is stored 

Что позволит избежать немедленного вызова обработчика и затем также не приводит к неопределенным быть назначен обработчик OnLoad.

Answer 2

Добавить событие в document;

document.addEventListener("DOMContentLoaded", function(event) { 
    //your code to run since DOM is loaded and ready 
}); 

Answer 3

"объект Image функция OnLoad стрельбы мгновенно"

Это потому, что вы их поджимать. Событие onload запускается, как только исходный файл изображения завершается, независимо от того, что они все еще осиротели, а именно: не добавлено к дереву документа. И, конечно, термин «мгновенно» относится к тому факту, что они уже обналичены; и поэтому извлекаются из наличных денег - «мгновенно».

p.s .: Вам необходимо зарезервировать себя, указав img.src, пока не подумаете, что готовы обработать событие onload.