jquery - 如何使用CSS/jQuery智能加载图片？

Question

我有一个拇指 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>

和一个名为“content”的空 div:

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

和一个名为“preload”的隐藏 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 的图像，并使用 将它们放入 content 中html() 方法。问题是，图库有一百张图像，而不是四张，并且如果我单击下面的缩略图之一，content div 就会处于空状态，直到加载之前的所有其他图像。

解决这个问题的最佳方法是什么？我的第一个想法是也许有一种方法可以对图像加载进行排队或出队？调暗拇指直到其内容加载？完全放弃预加载而选择更好的方法吗？如果是这样，怎么办？

Answer 1

如果您在 HTML 中放置 IMG 标记，浏览器将加载所有这些标记，无论它们是否隐藏。不同的浏览器以不同的方式执行此操作，f.ex IE 的“槽位”比 chrome/ff 少。