前端实现百分⽐进度条
随着html5的普及，各种css3动画及js特效在⽹页中也是层出不穷，PC端加载数据的速度还是⽐较快的，但是对于移动端设备⽽⾔则相对要慢不少，如果图⽚或者脚本没有加载完，⽤户在操作中就可能发⽣各种问题，因此我们需要对数据加载进⾏侦测，以更加⼈性化的⽅法将⽹页程序内容展现给⽤户，实现更佳的⽤户体验。
1.定时器实现进度条
优点：解决⼤部分加载进度问题
缺点:⼀旦有了缓存，定时器加载就变得鸡肋了
<script>
$(function () {
js控制css3动画触发//可使⽤jquery动态添加遮罩及loading效果
// var loading = '<div class="loading"><div class="pic"></div></div>';
/
/$("body").append(loading);
//启动⼀个定时器
setInterval(function(){
$(".loading").fadeOut();//3秒之后影藏
},3000)
})
2.  通过加载状态事件制作进度条
dystatechange 页⾯加载状态改变时的事件
adyState 返回当前⽂档的状态
1.uninitialized 还未开始载⼊
2.loading 载⼊中
3.interactive 已加载,⽂档与⽤户可以开始交互
4plete 载⼊完成
<script type="text/javascript">
adyState=="complete"){
$(".loading").fadeOut();
}
}
</script>
3.⾃定义页⾯需加载的图⽚数量来制作进度条
优点:⾃定义需要提前加载的图⽚，⽅便按需预加载，可以把背景图提前预加载，基本能满⾜80%的需求
缺点：需要通过js加载下图⽚
//此⽅式还可以做懒加载使⽤，页⾯加载⼀部分，页⾯显⽰后加载其余部分
var imgSrcArr = [
'img/1.png',
'img/2.png',
......
];
var imgWrap = [];
function preloadImg(arr) {
for(var i =0; i< arr.length ;i++) {
imgWrap[i] = new Image();
imgWrap[i].src = arr[i];
}
}
preloadImg(imgSrcArr);
欢迎评论

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。