javascript - 对将多个图像传递给 Image() 对象感到困惑

Question

我想我在这里遗漏了一条明显的规则，如果能澄清一下就好了 -

我正在尝试编写一个图像预加载器，并且我正在遵循此帖子中给出的建议: Preloading images in Javascript? Without jQuery

我可以看到这一切是如何运作的，直到:

    for(var i = 0; i < imageList.length; i++ ) {
        var imageObject = new Image();
        imageObject.src = imageList[i]; }

我一直认为这会在每次迭代时简单地更改/覆盖 src 属性，将 imageObject.src 作为循环结束时列表中的最后一个图像，尽管很明显该函数用于使用多个图像。

所以我假设它让 imageObject 包含一个图像数组，但我不确定它是如何做到的。我有什么问题吗？

Answer 1

您所拥有的“可能”会起作用。但是，这不是理想的做事方式，因为它依赖于浏览器和垃圾收集的一些未记录的方面。参见 here和 here更安全的方法来做到这一点。我将尝试解释您的代码在做什么。

当您执行此行时:

   var imageObject = new Image();

它正在创建一个新的 DOM 图像对象并将对该对象的引用放置在变量 imageObject 中。

当您执行此行时:

    imageObject.src = imageList[i];

它正在分配新图像对象的 .src 属性。这不会覆盖先前图像对象的 .src 属性。

但是，因为以前的图像对象没有存储在任何地方，也没有其他 javascript 对它们有任何引用，它们可以被浏览器垃圾收集，并且可以随时自由地摆脱它们。要将其用于可靠的缓存，您希望浏览器不会取消正在进行的正在加载图像的网络操作，并且您希望它们仍然进入浏览器缓存以便进行预加载。

将 imageObject 存储在数组中要安全得多，因为我已经向您指出了其他解决方案。这可以防止它们被垃圾收集，因此不存在图像加载被取消的风险。

例如，这样做会更安全:

var imgs = [];
for (var i = 0; i < imageList.length; i++ ) {
    var imageObject = new Image();
    imageObject.src = imageList[i]; 
    imgs.push(imageObject);
}

前两个对其他解决方案的引用做了类似的事情，但将其封装在一个函数中，并且还能够在所有图像完成预加载时通知您。