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

有一种简单的众所周知的方式，在视口外部的固定位置的div上预加载图像以保存一些图像。用css背景图像预加载图像？

它实际上是相同的只是在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多背景可能吗？

来源

2011-08-25 matt

当逗号单独的背景图像像这样： background-image: url(../images/misc/formLoader.gif), url(../images/misc/selectLoader.gif), url(../images/misc/projectLoader.gif); 它应该工作。我不知道，如果这与`背景：'工作。试试吧。

来源

2011-08-25 07:13:01

您可以用css3将多个背景放入一个元素。 http://www.css3.info/preview/multiple-backgrounds/

如果你希望它在IE浏览器以及..你想做的事吧<img>方式。

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

使用此方法，您只需加载一个<img>或background，但仍可加载多个图像。

来源

2011-08-25 07:16:28 Joonas

在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');}

来源

2013-10-31 20:13:25 gtr1971

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

回答

相关问题