素材工具:
https://icons8.com/preloaders/
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 = ''