jQuery - 显示图片直到页面加载完成

　　实现一个页面加载时，显示图片，页面加载完毕隐藏图片的小例子。

　　  效果如图。

 

　　具体思路： 浏览器在解析 HTML 时，是从上往下解析之行的，因此为了实现页面加载时显示图片，只需要在页面的 body 开头部分放一个图片，然后在 body 结束或 jQuery 的页面就绪事件中

隐藏这个图片，就可以达到这个效果了。

 

    代码如下：

    

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            body { font-size:12px; }
            .loading { position: fixed;_position:absolute;/* ie6 不支持 fixed 属性,所以使用 hack */
                      top:50%;left:50%;
                      width:124px;height:124px;overflow:hidden;z-index:2;
                      background-image: url(../../img/07/loaderc.gif);
                      background-repeat: no-repeat;
                      margin-top:-62px;margin-left:62px;margin-right: 0;margin-bottom: 0; }
        </style>
    </head>
    <body>
        <!-- html 代码 -->
        <div class="loading"></div>
        <img src="../../img/07/googlelogo.jpg" width="486" height="134" alt=""/>
        <p>很多网站都有这样的一种特效，在页面加载时，先显示一幅图片，当页面加载完成后，图片隐藏，显示页面内容。比如一些网站在页面加载时，会显示一张宣传性的图片，以吸引用户的注意，当页面内容加载完成后，再隐藏这张图片，显示网页的内容。</p>
        <script src="../../js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*
             * 浏览器在解析 HTML 时,是从上往下解析执行的,因此为了实现页面加载时显示图片,
             * 只需要在页面的 body 开头部分放一个图片，然后在 body 结束或 jQuery 的页面
             * 就绪事件中隐藏这个图片,就可以达到这个效果。
             */
            $(function(){
                $('.loading').fadeOut();
            });
        </script>
    </body>
</html>

 

　　

 

posted @ 2016-06-15 10:18  温柔的敲敲敲  阅读(860)  评论(0)    收藏  举报