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];
}

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

我想知道是否将图像存储在内存中，然后将Image对象直接附加到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);
  };
}

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

对于缓存，任何缓存的图像都会加载得更快，全部

是否可以使用Image对象预加载图像而不使用缓存？

1 个答案: