预映像加载元素的js

时间:2011-04-10 04:47:04

标签: javascript jquery html lazy-loading loading

有一个div #container,其中包含各种带有大背景图片的div,

我想使用一些Pre-Image loading js来避免加载图片的丑陋外观。

但问题是我找不到任何在后台加载所有图片的脚本,而是在#container显示加载栏。

虽然互联网上充满了为全身加载图像的脚本,但我只想要一个元素,而其他一切都是可见的,比如内容。

更新问题: 以下脚本是否适用于CSS中指定的背景图像?

$('#container img:last').load(function(){ 
  //do stuff
});

UPDATE :最好的解决方案就是抓住这个jQuery插件,它叫做“preloadCssImages”。你可以找到它here

它预先加载所有存在的css图像,甚至没有费心去做所有的事情。

3 个答案:

答案 0 :(得分:1)

您可以等待容器中的最后一张图片加载然后执行您的操作。 所以像这样

$('#container img:last')。load(function(){     //做东西 });

答案 1 :(得分:1)

首先在容器中设置加载图像:

<div id="container"><img src="loading.gif" class="loading"/></div>

当所有图像加载完成后,清空#container div并将所有图像附加到div中,如下所示:

$('#container img:last').load(function(){
$('#container img.loading').remove();
})

答案 2 :(得分:1)

优雅的解决方案是使用CSS级联。 HTML:

<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>

CSS:

.c1 { background: #fff }
.c2 { background: #eee }
.loadimages .c1 { background: url(big1.jpg); }
.loadimages .c2 { background: url(big2.jpg); }

JS(在加载时或在你准备好的时候):

document.getElementsByTagName('body')[0].className += 'loadimages';

大多数浏览器只根据需要加载未使用的图像,或者在触发窗口加载事件后加载它们。但是,图像也按照它们遇到的顺序放在加载队列中,所以即使上面的JS在DOM准备好的情况下执行,它仍然会在所有其他未在.loadimage类后面级联的图像之后加载图像。