用css背景图像预加载图像？答案

【问题标题】：preload images with css background images?用css背景图像预加载图像？
【发布时间】：2011-11-03 10:04:15
【问题描述】：

有一种众所周知的简单方法，即在包含一些图像的视口之外使用固定位置的 div 预加载图像。

在css中只使用背景属性，将多张图片应用到一个没有内容的div上，其实是一样的吗？

喜欢吗？

<div id="preload"></div>

#preload {
    position: absolute;
    overflow: hidden;
    left: -9999px; 
    top: -9999px;
    height: 1px;
    width: 1px;
    background: transparent url("../images/misc/formLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/selectLoader.gif") no-repeat center center;
    background: transparent url("../images/misc/projectLoader.gif") no-repeat center center;
}

这真的有用吗？还是最后一个背景属性会覆盖其他声明？

是否可以使用 CSS3 多背景？

【问题讨论】：

标签： image css preload

【解决方案1】：

当您像这样用逗号分隔背景图像时： background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); 它应该工作。我不知道，这是否适用于“背景：”。试试看吧。

【讨论】：

【解决方案2】：

您可以使用 css3 为一个元素添加多个背景。 http://www.css3.info/preview/multiple-backgrounds/

如果你希望它也能在 ie 中工作.. 你想用<img> 的方式来做。

另外一种好方法是将多个图像放在单个图像文档中，并将其作为背景图像应用于分隔元素，并使用background-position: -20px 0px; 定义该特定图像所在的位置。这使得本文档中的所有这些图像在加载的时间与它们在同一个文档中的加载时间完全相同..

使用这种方式，您只需加载一张<img> 或background 即可加载多张图片。

【讨论】：

【解决方案3】：

这对我在 Chrome 和 IE 中都非常有用，可以预加载图像并在悬停时交换它们。 “预加载” div 没有高度/宽度，因为图像设置为背景，因此它不会显示在页面上，并且当您想在悬停时交换它们时图像已准备好。（您显然必须在锚点上设置高度/宽度。我只是在这里展示最小的 CSS 来说明这一点）

HTML：

<div id="preload"></div>
<div id="icons">
    <a href="http://..." class="social-button-1"></a>
    <a href="http://..." class="social-button-2"></a>
    <a href="http://..." class="social-button-3"></a>
</div>

CSS：

#preload {background: url('images/pic1b.png'), url('images/pic2b.png'), url('images/pic3b.png');}
.social-button-1 {background: url('images/pic1a.png');}
.social-button-2 {background: url('images/pic2a.png');}
.social-button-3 {background: url('images/pic3a.png');}
.social-button-1:hover {background: url('images/pic1b.png');}
.social-button-2:hover {background: url('images/pic2b.png');}
.social-button-3:hover {background: url('images/pic3b.png');}

【讨论】：