为什么需要javascript来预加载图像？

在网站上我找到了一些关于预加载图片的解释

<SCRIPT LANGUAGE="JavaScript">
Image1= new Image(175,50)
Image1.src = "image1.gif"

Image2 = new Image(25,30)
Image2.src = "image2.gif"

Image3 = new Image(125,80)
Image3.src = "image3.gif"

</SCRIPT> 

图像1=新图像（175,50）
Image1.src=“Image1.gif”
图像2=新图像（25,30）
Image2.src=“Image2.gif”
图像3=新图像（125,80）
Image3.src=“Image3.gif”

有人能解释一下，上面的代码和下面的代码有什么区别吗

<div style="display:none;">
<img id="Image1" src="image1.gif">
<img id="Image2" src="image2.gif">
<img id="Image3" src="image3.gif">
</div>

在这两种情况下，图像都被缓存并准备在页面上的某个位置使用

---

为什么我们需要任何特殊的预加载js代码？

我能想到的一些优点：

• 循环时，只需指定一次图像文件夹
• 更好地控制何时要预加载
• 清洁DOM

---

因为js可以在任何东西可见之前从加载，而且它可以在许多页面上预加载，而不会使html膨胀。只有当你想更改屏幕上的图像时，你才真正受益于缓存——上次我看到这样的代码时，我们通过更改显示的图像进行按钮翻转。我想说的另一个优点是，使用JS时，你的标记更清晰。你不能仅仅为了预加载而把东西塞进DOM中。好吧，但这还不足以作为为预加载图像创建这么多特殊插件的理由。