js（jquery）网页进度条加载n中办法和原理（也有css3动画进度条）
2017-08-10 16:59
537 查看
有时候网站内容比较多，或者网络不太好，客户刚打开url看到是空白，内容都在加载中，过一会才能看到网页内容，这样的体验特别糟糕，不耐烦的客户会直接关闭页面，假设能在等待的时候加一些初始动画或者加载进度条，会让客户体验好很多，今天小飞飞就带大家做一些进度条的那些事。
1.最常见的进度条制作，利用setInterval（）延迟显示主页面，但是只是一个障眼法，并不能检测页面内容是否真正加载完毕//上代码
注意！代码中引入都是大图片，让加载更慢，就是为了更好的看加载效果
2.利用document.onreadystatechang事件 和readyState的complete，在頁面載如完成的時候让加载部件消失,这种用的比较多，也是比较常见的！来看代码！
注意！代码中引入都是大图片，让加载更慢，就是为了更好的看加载效果
3.有的同学可能想要那种加载进度条的那种，来来！上代码！这种是利用文档的一个由上到下的加载顺序在中间加animate动画 ！看代码！
4.有的同学坐不住了！尼玛人家要有那种百分比数字加载那种 比如显示0%到100%那种变化！好！可以可以！都上！先讲原理：一般网站中图片加载占的时间是比较多的，占网站加载时间的80%以上，那些html文件什么的太小了对于图片来说，所以我们只要统计出图片的加载时间，基本就是网站的加载时间，然后把这些时间分开，每个图片加载需要多少时间之后计算显示！来来！上代码！说半天都不知道说啥！sb楼主。。。。
小伙伴们，可以直接复制拿去运行！前提一定要引入jquery哦！
1.最常见的进度条制作，利用setInterval（）延迟显示主页面，但是只是一个障眼法，并不能检测页面内容是否真正加载完毕//上代码
注意！代码中引入都是大图片，让加载更慢，就是为了更好的看加载效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0px;margin:0px;list-style-type: none;}
#mask{width:100%;position: fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:100;background:#000;}
.loading{position: fixed;top:50%;left:50%;z-index: 101;transform:translate(-50%,-50%);}
</style>
</head>
<body>
<!-- 加載状态 -->
<div id="mask"></div>
<div class="loading"><img src="img/loading.gif" width="50"></div>
<!-- 加載状态end -->
<img src="http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1403/01/c0/31671078_1393641119421.jpg">
<img src="http://www.wyzu.cn/uploadfile/2013/1106/20131106010025493.jpg">
<img src="http://i7.download.fd.pchome.net//g1/M00/0D/1A/oYYBAFS_YAyIaAk8AAp5Fvf_uncAACPcAGgRZoACnku700.jpg">
<img src="http://p0.so.qhmsg.com/t01770dfbac6bac1c4f.jpg">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
<script type="text/javascript">
$(function(){
setInterval(function(){
$("#mask").css("display","none")
$(".loading").css("display","none")
},3000)
})()
</script>
</body>
</html>2.利用document.onreadystatechang事件 和readyState的complete，在頁面載如完成的時候让加载部件消失,这种用的比较多，也是比较常见的！来看代码！
注意！代码中引入都是大图片，让加载更慢，就是为了更好的看加载效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0px;margin:0px;list-style-type: none;}
#mask{width:100%;position: fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:100;background:#000;}
.loading{position: fixed;top:50%;left:50%;z-index: 101;transform:translate(-50%,-50%);}
</style>
</head>
<body>
<!-- 加載状态 -->
<div id="mask"></div>
<div class="loading"><img src="img/loading.gif" width="50"></div>
<!-- 加載状态end -->
<img src="http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1403/01/c0/31671078_1393641119421.jpg">
<img src="http://www.wyzu.cn/uploadfile/2013/1106/20131106010025493.jpg">
<img src="http://i7.download.fd.pchome.net//g1/M00/0D/1A/oYYBAFS_YAyIaAk8AAp5Fvf_uncAACPcAGgRZoACnku700.jpg">
<img src="http://p0.so.qhmsg.com/t01770dfbac6bac1c4f.jpg">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
<script type="text/javascript">
document.onreadystatechange=function(){
if(document.readyState=='complete'){
$("#mask").css("display","none")
$(".loading").css("display","none")
}
}
</script>
</body>
</html>3.有的同学可能想要那种加载进度条的那种，来来！上代码！这种是利用文档的一个由上到下的加载顺序在中间加animate动画 ！看代码！
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0px;margin:0px;list-style-type: none;}
#mask{width:0%;position: fixed;top:0px;z-index:100;background:#000;height:5px;background:red;}
/* .loading{position: fixed;top:50%;left:50%;z-index: 101;transform:translate(-50%,-50%);} */
</style>
<script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
</head>
<body>
<!-- 加載状态 -->
<!-- <div id="mask"></div>
<div class="loading"><img src="img/loading.gif" width="50"></div> -->
<!-- 加載状态end -->
<div id="mask"></div>
<img src="http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg">
<script type="text/javascript">
$("#mask").animate({width:"10%"},100)
</script> <!-- 加载一部分改变mask的宽度动画 -->
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1403/01/c0/31671078_1393641119421.jpg">
<script type="text/javascript">
$("#mask").animate({width:"40%"},100)
</script><!-- 加载一部分改变mask的宽度动画 -->
<img src="http://www.wyzu.cn/uploadfile/2013/1106/20131106010025493.jpg">
<script type="text/javascript">
$("#mask").animate({width:"60%"},100)
</script><!-- 加载一部分改变mask的宽度动画 -->
<img src="http://i7.download.fd.pchome.net//g1/M00/0D/1A/oYYBAFS_YAyIaAk8AAp5Fvf_uncAACPcAGgRZoACnku700.jpg">
<script type="text/javascript">
$("#mask").animate({width:"70%"},100)
</script><!-- 加载一部分改变mask的宽度动画 -->
<img src="http://p0.so.qhmsg.com/t01770dfbac6bac1c4f.jpg">
<script type="text/javascript">
$("#mask").animate({width:"80%"},100)
</script><!-- 加载一部分改变mask的宽度动画 -->
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<script type="text/javascript">
$("#mask").animate({width:"100%"},100)
</script><!-- 加载一部分改变mask的宽度动画 -->
</body>
</html>4.有的同学坐不住了！尼玛人家要有那种百分比数字加载那种 比如显示0%到100%那种变化！好！可以可以！都上！先讲原理：一般网站中图片加载占的时间是比较多的，占网站加载时间的80%以上，那些html文件什么的太小了对于图片来说，所以我们只要统计出图片的加载时间，基本就是网站的加载时间，然后把这些时间分开，每个图片加载需要多少时间之后计算显示！来来！上代码！说半天都不知道说啥！sb楼主。。。。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0px;margin:0px;list-style-type: none;}
#mask{width:100%;position: fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:100;background:#000;}
.loading{position: fixed;top:50%;left:50%;z-index: 101;
width:50px;height:50px;
transform:translate(-50%,-50%);
border-radius:25px;
box-shadow: 3px 3px 3px #ccc;
animation:circle 1s infinite linear;
}
@keyframes circle{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.loading_number{
position: fixed;top:50%;left:50%;
width:50px;height:50px;
z-index: 101;/*transform:translate(-50%,-50%);*/
text-align: center;
line-height: 50px;
color:white;
}
</style>
</head>
<body>
<!-- 加載状态 -->
<div id="mask"></div>
<div class="loading"></div>
<div class="loading_number">0%</div>
<!-- 加載状态end -->
<img src="http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1403/01/c0/31671078_1393641119421.jpg">
<img src="http://www.wyzu.cn/uploadfile/2013/1106/20131106010025493.jpg">
<img src="http://i7.download.fd.pchome.net//g1/M00/0D/1A/oYYBAFS_YAyIaAk8AAp5Fvf_uncAACPcAGgRZoACnku700.jpg">
<img src="http://p0.so.qhmsg.com/t01770dfbac6bac1c4f.jpg">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
<script type="text/javascript">
var imgs=$("img") //获取到网页所有图片的节点
var num=0
imgs.each(function(index){
var oimg=new Image() //实例化一个img对象
oimg.onload=function(){ //一个图片对象加载完之后让loading——number中的数字变化，没加载完一个就变化一次直到加载完所有让遮罩消失
num++
$(".loading_number").html(parseInt(num/(imgs.size())*100)+"\%") //计算一个多少个图片，一个图片占百分多少
if(num==(imgs.size())){ //当最后一张图片加载完之后我们让遮罩层延迟消失；当让也可以不设置延迟消失，这样做只是为了能看到走到100%
setInterval(function(){
$("#mask").css("display","none")
$(".loading").css("display","none")
$(".loading_number").css("display","none")
},100)
}
}
oimg.src=imgs[index].src //
})
</script>
</body>
</html>小伙伴们，可以直接复制拿去运行！前提一定要引入jquery哦！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 30 个 jQuery & CSS3 加载动画和进度栏插件
- 30 个 jQuery & CSS3 加载动画和进度栏插件（附免积分下载地址）
- jquery插件NProgress.js制作网页加载进度条
- js网页顶部线性页面加载进度条,jquery头部线性进度条总结
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
- jquery网页加载进度条NProgress.js
- 30 个 jQuery & CSS3 加载动画和进度栏插件
- jquery网页加载进度条NProgress.js
- 网页动态加载图片 通过JS和jquery实现。
- css3实现圆环加载进度条动画
- js实现网页图片延时加载的原理和代码
- 8款效果精美的 jQuery 加载动画和进度条插件
- jQuery网页加载进度条插件
- 16 个使用 CSS3 和 jQuery 制作的加载中动画
- 原生JS实现首页进度加载动画
- 【随记 css+js 开发】带进度条和数字的动画加载页开发
- HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等
- 常用的网页加载进度条之【制作进度条】
- js实现网页预加载动画