立即触发图像对象加载功能

Question

我正在创建一些图像对象，当我在 Dev Tools 中设置网络节流时，我看到在我的图像完全加载之前调用了 onload 函数。

我真的找不到解决办法。我的代码：

    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

这将避免立即调用处理程序，也不会导致将 undefined 分配给 onload 处理程序。

Answer 2

向 document 添加事件；

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

Answer 3

"Image object onload function firing instantly"

那是因为您正在预加载它们。一旦图像源完成加载， onload 事件就会触发，不管它们仍然是孤立的，即：没有附加到文档树。当然，术语 "instantly" 适用于它们已经兑现的事实；因此正在从现金中提取 - "instantly"。

p.s.: 在您认为自己准备好处理 onload 事件之前，您需要避免指定 img.src。

立即触发图像对象加载功能

Image object onload function firing instantly

javascript

image

onload