利用CSS的伪元素来预先加载多个图像

为了使网站的一些动态效果更加流畅，通常都需要预先加载一些图片。这里介绍一种利用CSS的 :after或:before 伪元素来预先加载图像的方法，其代码简洁且兼容性好。

利用CSS的 :after或:before 伪元素来预先加载图像的CSS代码如下

body:after{
content: url(renniaofei_com_1.jpg) url(renniaofei_com_2.jpg) url(renniaofei_com_3.jpg);
display: none; }

代码说明：

这里我们使用:after伪元素，因为:after 伪元素会在body元素之后添加内容，符合常规的设计要求，当然特殊情况下也可以使用:before伪元素。

:after 伪元素允许编程人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

上述CSS代码的含义：在body元素之后添加3个图片（renniaofei_com_1.jpg renniaofei_com_2.jpg renniaofei_com_3.jpg
），但将display设置为none，即页面中不显示这3个图片。

兼容性

由于CSS2支持 :after和:before 伪元素，因此所有的主流浏览器都支持:after和:before。

注：IE6和IE7不支持:after和:before伪元素。