更快的图像加载

我想在我的页面上逐个显示约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属性为th阵列新图像的路径。

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;   
}

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

来源

2010-04-05 nemiss

购买更快的互联网连接？ ;） – knittl 2010-04-05 09:00:52

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

来源

2010-04-05 09:02:19 knittl

这是我想了解的，如果只是创建一个图像对象（而不是渲染）它会自动加载？ – nemiss 2010-04-05 09:07:49

是的，这是，请参阅提供的链接 – knittl 2010-04-05 09:10:44

您应该查看图像预加载。你可以实现你想要通过JavaScript什么通过为每个图像创建一个新的图像对象：

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

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

来源

2010-04-05 09:06:27

谢谢你，knittl是第一个回答，所以我会接受他的答案。 – nemiss 2010-04-05 09:16:57

@nemiss：不用担心:-)这通常是我如何接受答案。 – 2010-04-05 09:18:37

我之前遇到过一个问题，那就是我的图像厨房每次都会随机冻结照片。我尝试了这两件事，我用一个装载图像的数组创建了一个自定义JavaScript，并试用了灯箱库。速度没有任何区别。在这两种情况下，图像加载缓慢。

我查了一下，发现减缓加载的原因可能是。
- 网络连接速度缓慢。
- 图像大小/格式。（JPG建议用于照片）

因此，我做了一些研究，并提出了简单的解决方案，HQ照片在为网页优化时加载更快。这可以用Photoshop完成。

经过优化的照片，质量很好，我的画廊正在瞬间加载。

来源

2016-02-05 16:57:01 dan

更快的图像加载

回答

相关问题