完整的兼容代码如下:
<style>
#preloader { background-image:url(img01.jpg); background-image:url(img02.jpg); background-image:url(img03.jpg); 0; height:0; display:inline }/*IE6 7 Images you want to preload*/
body:after { content:url(img01.jpg) url(img02.jpg) url(img03.jpg); display:none }/*preload for other Browser*/
</style>
<body>
<!--[if (IE 6)|(IE 7)]><div id="preloader"></div><![endif]-->
</body>
出处:http://www.daimaren.cn/archives/271
CSS 创建content
在CSS2中介绍了一个叫做content的 属性,它连同 :before和 :after这两个伪类使用,可以让我们在文档上创建容器。最有趣的content应用是它允许使用url()来调用一个图 像:
content: url(img01.jpg);
这可以让我们预加载一张图片,那么多个图片呢?下面这个展示了content的强大,它可以允许放置多个url:
content: url(img01.jpg) url(img02.jpg) url(img02.jpg)
多么简洁,我们可以用一行CSS搞定多个图片的预加载,以上代码支持以下浏览器:
* IE8+
* FF2+
* Safari 3+
* Chrome 1+
* Opera 9.62+
组合
我们知道如何用CSS预加载图片了,把它们放在一起:
body:after
{
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
我们将content应用在在body标签被创建后,然后隐藏它,这样预加载的图片不会显示但仍然在加载,这样将拥有一个纯CSS的不用标签的预加 载。
近乎完美
邪恶的IE系列(IE6/IE7)不支持content,因此也不会预加载任何图片。但是这将是一个较小的利弊权衡,IE6/7用户将直接读取图片,而不 是从缓存中读取。
一种解决它们支持不足的方案是使用IE 条件注释,如果是IE6/7就用标签里隐藏图片的方式预加载,或者是加空标签并设置它的背景图片,如:
#preloader {
/* Images you want to preload*/
background-image: url(image1.jpg);
background-image: url(image2.jpg);
background-image: url(image3.jpg);
0px;
height: 0px;
display: inline;
}
完整的兼容代码如下:
<style>
/*IE6/7*/
#preloader {
/* Images you want to preload*/
background-image: url(img01.jpg);
background-image: url(img02.jpg);
background-image: url(img03.jpg);
0px;
height: 0px;
display: inline;
}
/*preload for other Browser*/
body:after
{
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
</style>
<body>
<!--[if (IE 6)|(IE 7)]>
<div id="preloader"></div>
<![endif]-->
</body>