版权声明:如需转载,请注明来源 https://blog.csdn.net/qq_28073073/article/details/86640200
随着html5的普及,各种css3动画及js特效在网页中也是层出不穷,PC端加载数据的速度还是比较快的,但是对于移动端设备而言则相对要慢不少,如果图片或者脚本没有加载完,用户在操作中就可能发生各种问题,因此我们需要对数据加载进行侦测,以更加人性化的方法将网页程序内容展现给用户,实现更佳的用户体验。
1.定时器实现进度条
优点:解决大部分加载进度问题
缺点:一旦有了缓存,定时器加载就变得鸡肋了
<script>
$(function () {
//可使用jquery动态添加遮罩及loading效果
// var loading = '<div class="loading"><div class="pic"></div></div>';
//$("body").append(loading);
//启动一个定时器
setInterval(function(){
$(".loading").fadeOut();//3秒之后影藏
},3000)
})
2. 通过加载状态事件制作进度条
- 1.document.onredystatechange 页面加载状态改变时的事件
- 2.document.readyState 返回当前文档的状态
-
- 1.uninitialized 还未开始载入
-
- 2.loading 载入中
-
- 3.interactive 已加载,文档与用户可以开始交互
-
- 4.complete 载入完成
<script type="text/javascript"> document.onreadystatechange=function(){ if(document.readyState=="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);
欢迎评论