有一个div #container
,其中包含各种带有大背景图片的div,
我想使用一些Pre-Image loading js
来避免加载图片的丑陋外观。
但问题是我找不到任何在后台加载所有图片的脚本,而是在#container
显示加载栏。
虽然互联网上充满了为全身加载图像的脚本,但我只想要一个元素,而其他一切都是可见的,比如内容。
更新问题: 以下脚本是否适用于CSS中指定的背景图像?
$('#container img:last').load(function(){
//do stuff
});
UPDATE :最好的解决方案就是抓住这个jQuery插件,它叫做“preloadCssImages”。你可以找到它here。
它预先加载所有存在的css图像,甚至没有费心去做所有的事情。
答案 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类后面级联的图像之后加载图像。