图像对象 onload 函数立即触发

我正在创建一些 Image 对象，当我在开发工具中设置网络限制时，我看到 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 提供，谢谢！

问题是您的事件处理程序分配。

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 处理程序。