JavaScript，将相同的图像源设置为不同的图像(预加载）

JavaScript, set same image source to different images (preload)

本文关键字：图像 加载 JavaScript 设置      更新时间：2023-09-26

对不起，标题可能不正确。。我有下一个问题：我想用进度条进行预加载。我只解决了一个问题。

[代码1]：

//Preloader code
var img = [];
img[0] = new Image();
img[0].src = 'test0.jpg';
img[0].onload = function(){
  //some code
}
//.....
img[100] = new Image();
img[100].src = 'test100.jpg';
img[100].onload = function(){
  //some code
}
//.....
//  all images loaded
//.....
/*
for expample  in this part of code I need put my image 'test0.jpg' into html
*/
var temp_img = new Image();
temp_img.src = 'test0.jpg';

问题是：它会再次下载"test0.jpg"还是只是从缓存中获取？

或者最好这样做[代码2]:

//Preloader code
var img = [];
img['test0'] = new Image();
img['test0'].src = 'test0.jpg';
img['test0'].onload = function(){
  //some code
}
//.....
img['test100'] = new Image();
img['test100'].src = 'test100.jpg';
img['test100'].onload = function(){
  //some code
}
//.....
//  all images loaded
//.....
/*
for expample in this part of code I need put my image 'test0.jpg' into html
*/
var temp_img = img['test0'];
// draw temp_img

我想使用代码1。但它会减慢我的应用程序的速度吗？还是最好使用代码2？提前谢谢。

这两种方法都有优点和缺点。

第一种方法在图像元素上要轻得多，通常情况下，生成的DOM元素越少越好。不过，根据加载的信息量，浏览器可能不会提供缓存中的图像。最糟糕的情况是，如果浏览器已从缓存中删除图像，则需要再次从网络中获取。

第二种方法要安全得多，可以将图像保存在内存中，这意味着即使浏览器不缓存图像，它仍然可用。不过，它在图像元素上更重。

哪种解决方案更好取决于您的情况。如果你没有加载大量的图像，我认为解决方案1是更好的选择，因为它利用了浏览器的缓存。不过，如果你真的负担不起从网络上重新加载图像的费用，解决方案2会更安全。

TL；DR解决方案1不应该降低应用程序的速度，但解决方案2将确保您不会再次从网络中获取。

如果使用代码1，您的预加载程序将毫无用处，对吧？我会选择2个

相关文章：