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

对不起，可能不是正确的标题。。 我有下一个问题：我想用进度条进行预加载。我坚持一个问题

[代码1]：

//预加载程序代码
var-img=[]；
img[0]=新图像（）；
img[0].src='test0.jpg'；
img[0]。onload=function（）{
//一些代码
}
//.....
img[100]=新图像（）；
img[100].src='test100.jpg'；
img[100]。onload=function（）{
//一些代码
}
//.....
//已加载所有图像
//.....
/*
对于这部分代码中的expample，我需要将图像“test0.jpg”放入html中
*/
var temp_img=新图像（）；
temp_img.src='test0.jpg'这两种方法都有优点和缺点

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

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

哪种解决方案更好取决于您的情况。如果您没有加载大量图像，我认为解决方案1是更好的选择，因为它利用了浏览器的缓存。但是，如果您确实无法从网络上重新加载图像，那么解决方案2会更安全

TL；博士
解决方案1不应减慢应用程序的速度，但解决方案2将确保您不再从网络获取数据。
对于代码1，您的预加载程序将无效，对吗？我将使用2
我在许多代码示例中看到了这种解决方案。。这就是为什么我问）浏览器将缓存图像，当再次请求该图像时，浏览器将从缓存而不是从网络为其提供服务。这就是为什么方法1有效。但是，无法保证图像在缓存中。