网页加载进度条

1. 定时器的进度条（假的）
   <script type="text/javascript">
   $(function(){

    var loading=‘<div class="loading"><div class="pic"></div></div>‘; 
   
    $("body").append(loading); 
    setInterval(function(){ 
        $(".loading").fadeOut(); 
    },3000); 
   

   });
   </script>

2. 真实的获取内容，实现加载进度条
   要实现根据真实内容，来加载进度条，下面要介绍两个知识点：
   document.onreadystatechange 页面加载状态改变时的事件
   document.readyState 返回当前文档的状态

3. uninitialized - 还未开始载入

4. loading - 载入中

5. interactive - 已加载，文档与用户可以开始交互

6. complete - 载入完成
   2.1. 可以将如上定时器的代码，修改为：
   document.onreadystatechange=function(){
   if(document.readyState=="complete"){
   $(".loading").fadeOut();
   }
   }
   2.2： 定位在头部的进度度

   
   image.png
   

   2.3 实时获取加载数据的进度条
   建立图像对象：图像对象名称= new Image();
   使用:onload事件
   注：src属性一定要写到onload的后面，否则程序在IE中会出错

   
   image.png
   2.4先是监听图片的加载状况，然后监听整体的加载状况基本是实现加载进度统计

$(function () {
    window.onload=function () {
        console.log(100)
        $(".loading b").html(100+"%");
    }
    var imgs=$("img");
    var num=0;
    console.log(imgs.size());
    console.log(imgs.length);
    imgs.each(function (i) {
        var oImg=new Image();
        console.log(oImg);
        oImg.onload = function(){//使用onload方法，在加载完成后执行
           // console.log(oImg);
            oImg.onload = null;//首先清除掉缓存
           // console.log(oImg);
            num++;//每次加载的过程中num++，即执行次数
            var con_b=parseInt(num/($("img").size()+2)*100)+"%";
            console.log(con_b);
            $(".loading b").html(con_b);//改变b标签的内容，用num除以img的个数，再乘以100，再取整，这就是加载的百分数

        }
        oImg.src = imgs[i].src;//预加载，先指定一个img.src，当onload成功以后可以将数据指定到某一个元素或者图片上，或者返回一个结果
    });



})