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

我试图找出一种方法来（几乎）保证位于服务器上的图像文件将可用于在初始加载期后无延迟地附加到DOM。可以使用Image对象在不使用缓存的情况下预加载图像吗？

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

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

（与此相关：？什么样的工具可用于测试这种行为）

来源

2017-02-01 Josh de Leeuw

我认为你需要更多的解释。原始照片在哪里？这个数组只包含名称。这些文件在客户机上吗？或者他们在服务器上，并从客户端加载它？如果您有任何服务器端平台，那么它是什么？ – Meysam

我已经说明图像文件在服务器上，需要由客户端加载。 –

只有这样，才能保证他们每个加载是使用Load事件处理程序

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

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

至于缓存，任何缓存的图像将加载得更快，这就是全部

来源

2017-02-01 16:09:23 charlietfl

像这样加载的图像会在会话期间保持加载状态吗？换句话说，如果我有一个用户查看25分钟的单页应用程序，并且我加载了在会话开始时使用此方法将看到的所有图像，浏览器是否会在某个时间点清除内存？我需要在会话中显示20分钟的图像，以便像在开始时加载的图像一样快速地显示。 –

应该不成问题 – charlietfl

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

回答

相关问题