要实现网页加载进度条，方法有很多。网上有些方法使用的是定时器，这种方法是个误区不推荐使用。这里简单介绍下通过加载状态时间制作进度条

知识点

document.onreadystatechange                  页面加载状态改变时的事件

document.readyState                                返回当前文档状态

readyState 存在几种状态 ：

1. uninitialized    //还未开始载入

2. loading         //载入中

3. interactive      //已加载

4. complete        //载入完成

案例 1

使用 gif 小图片 实现页面加载进度显示   （分享一个网站获取各种gif图片  https://preloaders.net）

<style> 

     .loading{

        width:100%;

        height:100%;

        position:fixed;

        top:0;

        left:0;

        z-index:999;

        background:#FFF;

    }

     .loading .pic{

        width:64px;

        height:64px;

        background:url('/web/img/loading.gif');

        position:absolute;

        top:0;

        bottom:0;

        left:0;

        right:0;

        margin:auto;

    }

 </style> 

<divclass="loading"> 

     <divclass="pic"></div> 

</div> 

<scriptsrc="/web/js/zepto.js"> </script> 

<script>

    document.onreadystatechange= function(){

        console.log(document.readyState);

        if(document.readyState=='complete'){

            $(".loading").hide();

        } 

     }

 </script>