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

我有一个拇指

div

（为了简洁起见，我只显示了四个拇指）：

和一个名为“预加载”的隐藏的

div

：

我认为这将是一个很好的方式预装所有的图片在画廊。我的jQuery使用单击的缩略图的ID从相应的

span

中克隆（）图像，并使用

html（）

方法将它们放入

content

。问题是，库中有一百个图像，而不是四个，如果我单击下面的一个缩略图，

content div

将一直空着，直到加载之前所有其他图像

---

最好的解决办法是什么？我的第一个想法是，也许有一种方法可以将图像加载排队或取消排队？将拇指调暗，直到其内容加载？为了更好的方式，完全取消

预加载
？如果是，如何加载？
如果在HTML中放置
IMG
标记，浏览器将加载所有标记，无论它们是否隐藏。不同的浏览器以不同的方式实现这一点，f.ex IE的“插槽”比chrome/ff少。
如果在HTML中放置
IMG
标记，浏览器将加载所有这些标记，无论它们是否隐藏。不同的浏览器以不同的方式实现这一点，f.ex IE的“插槽”比chrome/ff少。
是的，我知道。这就是问题所在。如何解决这个问题？我想你需要让服务器端参与进来……让它向你发送你需要的图片……或者只是交换src属性？仅供参考，我使用load（）事件为每个拇指的不透明度设置动画，这些拇指的第一个对应图像已经加载。它在加载时会产生非常好的级联效果，你甚至不介意图像流的时间。是的，我知道。这就是问题所在。如何解决这个问题？我想你需要让服务器端参与进来……让它向你发送你需要的图片……或者只是交换src属性？仅供参考，我使用load（）事件为每个拇指的不透明度设置动画，这些拇指的第一个对应图像已经加载。它在加载时会产生非常好的级联效果，以至于你根本不在乎图像流进来所花的时间。
<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 id="content"></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>