如何使用 CSS/jQuery 智能加载图像？答案

【问题标题】：How to load images intelligently using CSS/jQuery?如何使用 CSS/jQuery 智能加载图像？
【发布时间】：2010-08-17 04:51:54
【问题描述】：

我有一个大拇指div（为简洁起见，我只显示四个大拇指）：

<div id="thumbs">
<img src="graphics/thumbs/01.jpg" width="190" height="190" class="thumb objects" id="project01" />
<img src="graphics/thumbs/08.jpg" width="190" height="190" class="thumb web" id="project08" />
<img src="graphics/thumbs/14.jpg" width="190" height="190" class="thumb freehand" id="project14"/>
<img src="graphics/thumbs/04.jpg" width="190" height="190" class="thumb freehand objects" id="project04" /></div>

还有一个名为“内容”的空div：

<div id="content"></div>

还有一个隐藏的div 称为“预加载”：

<div id="preload">
<span id="project01_content"><img src="graphics/010.jpg" /></span>
<span id="project02_content"><img src="graphics/022.jpg" /><img src="graphics/021.jpg" /><img src="graphics/023.jpg" /><img src="graphics/020.jpg" /></span>
<span id="project03_content"><img src="graphics/030.jpg" width="450" height="600" /><img src="graphics/031.jpg" width="450" height="600" /></span>
<span id="project04_content"><img src="graphics/040.jpg" width="775" height="600" /><img src="graphics/041.jpg" width="775" height="600" /></span></div>

我认为这是预加载图库中所有图像的好方法。我的 jQuery 使用点击缩略图的 ID 到 clone() 对应的 span 中的图像，并使用 html() 方法将它们放入 content。问题是，画廊有一百张图片，而不是四张，如果我点击下方的缩略图之一，content div 已经是空的，直到所有其他图片都加载完毕。

解决这个问题的最佳方法是什么？我的第一个想法是也许有一种方法可以排队或取消排队图像加载？调暗拇指，直到他们的内容被加载？完全取消preload 以支持更好的方法？如果有，怎么做？

【问题讨论】：

标签： jquery image image-preloader preloading

【解决方案1】：

如果您将IMG 标签放在HTML 中，浏览器将加载所有这些标签，无论它们是否隐藏。不同的浏览器以不同的方式做到这一点，f.ex IE 的“槽”比 chrome/ff 少。

【讨论】：

是的，我知道。那就是问题所在。如何绕过它？
我认为您需要涉及服务器端....让它向您发送您需要的图片....或者只是交换 src 属性？
仅供参考，我使用 load() 事件为每个已加载第一个相应图像的拇指的不透明度设置动画。它在加载时会产生如此漂亮的级联效果，您甚至不会介意图像流入所需的时间。