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

时间:2010-08-17 04:51:55

标签: jquery image image-preloader preloading

我有一个拇指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将一直空着,直到加载之前的所有其他图像为止。

最好的方法是什么?我的第一个想法是,可能有一种方法来排队或排队图像加载?把拇指弄暗直到它们的内容被加载?完全取消preload以支持更好的方式?如果是这样,怎么样?

1 个答案:

答案 0 :(得分:0)

如果您在HTML中添加了IMG个标记,则浏览器会加载所有标记,无论它们是否隐藏。不同的浏览器以不同的方式执行此操作,f.ex IE的“槽”比chrome / ff少。