Question

我正在创建一些Image对象，当我在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);
}

我碰巧知道答案，请用香草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

＆＃34;图像对象onload功能立即触发＆＃34;

那是因为你正在预装它们。一旦图像源完成加载，onload事件就会触发，而不管它们是否仍然是孤立的，即：不附加到文档树。当然，术语＆＃34;立即＆＃34;适用于他们已经兑现的事实;因此现在正被从现金中撤出 - ＆＃34;立即＆＃34;。

p.s。：您需要保留自己指定img.src，直到您认为已准备好处理onload事件为止。

图像对象onload功能立即触发

3 个答案: