可以使用 Image 对象在没有缓存的情况下预加载图像吗？

Question

我正在尝试找到一种方法来（几乎）保证位于服务器上的图像文件在初始加载期后可以毫无延迟地附加到 DOM。

我一直在使用标准的预加载技术，例如：

var images_to_load = ['img1.png', 'img2.png', 'img3.png'];
for(var i=0; i<images_to_load.length; i++){
  var img = new Image();
  img.src = images_to_load[i];
}

但我了解到，这是否有效取决于服务器和浏览器设置等因素，以及要加载的图像数量。

我想知道是否将图像存储在内存中，然后将图像对象直接附加到 DOM 会改变预加载的行为方式。这会绕过缓存吗？例如：

var images_to_load = ['img1.png', 'img2.png', 'img3.png'];
var images = [];
for(var i=0; i<images_to_load.length; i++){
  var img = new Image();
  img.src = images_to_load[i];
  images.push(img);
}

document.getElementById('target').appendChild(images[0]);

（相关：有哪些工具可用于测试这种行为？）

Answer 1

保证它们都被加载的唯一方法是使用加载事件处理程序

for(var i=0; i<images_to_load.length; i++){
  var img = new Image();
  img.src = images_to_load[i];
  images.onload = function(){
     document.getElementById('target').appendChild(img);
  };
}

请注意，这将按加载顺序添加，而不是数组顺序。

至于缓存，任何缓存的图片都会加载得更快，仅此而已