更快的图片加载速度

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

在加载文档时，您可以使用Image对象创建数组。请参阅this article on techrepublic

Answer 2

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

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

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

Answer 3

我以前有一个问题，我的图像画廊每次都会冻结在随机的照片上。我尝试了这两件事，我创建了一个自定义的JavaScript，其中包含一个加载图像的数组，我还尝试了Light Box库。在速度上没有任何区别。在两种情况下，图像加载速度都很慢。

我查了一下，发现加载慢的原因可能是。

• 互联网连接速度很慢。
• 图像大小/格式。(照片推荐使用jpg格式)

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

在优化照片后，质量仍然很好，我的图库正在瞬间加载。