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

作者:     目录:编程代码 & 网页设计     发表:2010年09月23日

为了使网站的一些动态效果更加流畅,通常都需要预先加载一些图片。这里介绍一种利用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伪元素。

标签:

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝红包领取方法:

  • 打开支付宝APP,首页搜索数字 1547638 即可领现金红包
  • 手机用户直接 点击这里领取
  • 或者支付宝APP扫描下面二维码领取
支付宝现金红包 每天可领

2 个评论

  1. shekck says:

    效果挺不错的,兼容性也好,我是直接无视IE及其全家的,呵呵

shekck进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.