javascript - 如何确定未附加到 DOM 的图像的加载状态

Question

我正在编写一些 javascript 来在 <canvas 上绘制数据。 >。数据点由几个不同(小)图像文件之一标记。我试图让绘图方法等待所有图像加载完毕。迄今为止我最好的尝试是这样的:

var icon = {
    left : {
        air : new Image(),
        bone : new Image(),
    },
    right : {
        air: new Image(),
        bone : new Image(),
    },
};

icon.left.air.src   = option.imgPath + 'left.air.png';
icon.right.air.src  = option.imgPath + 'right.air.png';
icon.left.bone.src  = option.imgPath + 'left.bone.png';
icon.right.bone.src = option.imgPath + 'right.bone.png';


function main() {
    Canvas.draw();

    // Make sure our image icons are loaded before we try to plot
    $(icon.left.air).load(function() {
        $(icon.right.air).load(function() {
            $(icon.left.bone).load(function() {
                $(icon.right.bone).load(function() {
                    Data.plot();
                });
            });
        });
    });
}

大多数情况下，这都可以按预期工作。有时，它会失败并且不会绘制任何数据。插入几个 console.log() 语句表明脚本将默默地停止执行一系列 .load() 语句，尽管后面的代码将被执行。

我的问题如下:我是否以正确的方式处理这个问题？有没有办法将一个事件附加到我的图标对象，一旦加载了所有内部图像，该事件就会触发？

这是一个 jquery 插件，因此显然基于 jquery 的解决方案与普通 javascript 一样可以接受。

Answer 1

如果我错了，请原谅我，但是你的 load 逻辑不是有缺陷吗？如果 right.air 在 left.air 之前加载会发生什么？最里面的 load 事件永远不会触发，那么剧情就不会开始，不是吗？

我会以不同的方式执行此操作:有四个标志，并且相应的 load 事件将其自己的标志设置为 true。在每个事件结束时检查所有四个标志是否都设置为 true。如果是，那么您就可以开始了。

baloo 所说的:在分配 src 之前，您需要绑定(bind) load 事件。