常用网页加载进度条

素材工具：

https://icons8.com/preloaders/

https://loading.io/

http://autoprefixer.github.io/

思路：使用一个空白div 固定定位到页面上（z-index设置大一点），内容加载完后隐藏该div

<div class="loading">

    <div class="pic"> </div>

</div>

1，通过定时器制作进度条

   假设3秒后隐藏

    setInterval(function() {

    $('.loading').fadeOut()
}, 3000)

2，通过加载状态时间制作加载器（使用gif图片或者使用css制作动画）

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

document.readyState    返回当前文档的状态（uninitialized、loading、interactive、complete）

document.onreadystatechange =function() {

    if (document.readyState === 'complete') {    // 加载完成，隐藏进度条

        $('.loading').fadeOut()

    }

}

3.  定位在头部的进度条（根据页面从上到下的加载顺序，在页面不同位置写js代码，改变进度条宽度）

某一处：$('.loading .pic').animate({widt: '60%'}, 100)

最后一处加一个回调函数：$('.loading .pic').animate({widt: '60%'}, 100，function() {

     $('.loading').fadeOut()

})

4. 实时获取加载数据的进度条（从0% -> 100%）

建立图像对象： var image = new Image()

image.onload = fucntion () {

}

image.src = ''