zoukankan      html  css  js  c++  java
  • 【图片预加载】

    完整的兼容代码如下:

    <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>
  • 相关阅读:
    python 练习 10
    python 练习 9
    运算符
    变量类型
    打印更多的变量
    变量和命名
    数字和数字计算
    第一个程序
    python 练习 8
    python 练习 7
  • 原文地址:https://www.cnblogs.com/enone/p/1782911.html
Copyright © 2011-2022 走看看