javascript - 更快的图像加载

Question

我想在我的页面上一张一张地显示大约 5-8 张图像，但我希望它们预先加载一张图像，而不是每次我切换到另一张图像时都加载它们。

我见过一些示例，其中页面上的所有图像(隐藏)如下:

<a href=""><img id="img1" src="images/image1.png" class="image" alt="" /></a>
<a href=""><img id="img2" src="images/image1.png" class="image" alt="" /></a>
<a href=""><img id="img3" src="images/image1.png" class="image" alt="" /></a>

并取消隐藏当前图像。

我所拥有的是一张图像，我更改了它的 src 属性，作为数组中新图像的路径。

SwitchNextImage: function(){    
   var theimg=document.getElementById("imgContainer");                  

   this.currentIndex = this.currentIndex+ 1 == this.totalImageCount ? 0 : this.currentIndex + 1;
   theimg.src=this.slideimages[this.currentIndex].src;          
}

第一种方法显然加载速度更快。但需要静态链接。
我的问题是如何使我的方法加载速度更快？

Answer 1

您应该研究一下图像预加载。您可以通过 javascript 为每个图像创建一个新的图像对象来实现您想要的:

var img = new Image();
img.src = "image2.png";

这将获取图像并将其存储在缓存中，而不实际将其显示在页面上，因此当您切换主图像的src时，浏览器可以从缓存中获取它。对所有图像重复此操作，您就应该完成设置。