有一个 div #container 包含各种带有大背景图片的 div，
我想使用一些Pre-Image loading js 来避免加载图像的丑陋外观。
但问题是我找不到任何脚本可以在后台加载所有图像，而是在#container 中显示加载栏。
虽然互联网上充满了加载全身图像的脚本，但我只想要一个元素，同时其他所有内容都是可见的，例如内容。
更新问题： 以下脚本是否适用于 CSS 中指定的背景图像？
$('#container img:last').load(function(){
//do stuff
});
更新：最好的解决方案是获取这个 jQuery 插件，它被称为“preloadCssImages”。你可以找到它here。
它预先加载所有存在的 css 图像，甚至无需费心去做所有这些事情。
【问题讨论】：
标签： javascript jquery html lazy-loading loading
您可以等待容器中的最后一张图片加载完毕，然后执行您的操作。 所以像这样的
$('#container img:last').load(function(){ //做东西 });
【讨论】：
<body>，并在您的CSS中应用body.loaded #example { background:...下的背景图像。
先在容器内设置加载图片：
<div id="container"><img src="loading.gif" class="loading"/></div>
当所有图像加载完成后，清空#container div 并将所有图像附加到 div 中，如下所示：
$('#container img:last').load(function(){
$('#container img.loading').remove();
})
【讨论】：
一个优雅的解决方案是使用 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 类后面没有级联的所有其他图片之后加载图片.
【讨论】：