Question

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

我看过一些例子，他们在页面上有所有图像（隐藏），如：

<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

你应该研究图像预加载。您可以通过为每个图像创建新的图像对象来实现您想要的功能：

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

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

Answer 2

加载文档后，您可以创建一个包含Image个对象的数组。见this article on techrepublic

Answer 3

我之前遇到过一个问题，我的图像厨房每次都会冻结随机照片。我尝试了这两件事，我创建了一个带有加载图像的数组的自定义JavaScript，我尝试了Light Box库。速度没有任何差别。在两种情况下加载的图像都很慢。

我查了一下，发现加载速度慢的原因可能就是。
- 慢速互联网连接。
- 图像大小/格式。（照片推荐使用jpg）

所以我做了一些研究，我想出了一个简单的解决方案， HQ照片在针对网络进行优化时加载速度更快。这可以通过Photoshop完成。

优化照片后，质量保持良好，我的画廊即时加载。

更快的图像加载

3 个答案: