常见的⼏种⽹页进度条及如何判断页⾯已经加载完毕⾸先推荐⼀个⾃动⽣成gif图标的⼀个⽹址：preloaders
在⾥⾯挑选好加载的效果图以后，点击下载：
下载完成以后把gif图⽚保存到你项⽬的img⽂件夹中，⽅便使⽤。
**
loading⽅法
1.很low的⽅法——直接使⽤定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见的⽹页进度条1</title>
<style>
.loading{
width: 100%;
height: 100%;
position: fixed;
top:0;
left: 0;
z-index: 100;
background-color: #fff;
}
.loading .pic{
width: 64px;
height: 64px;
background:url(images/loading.gif);
position: absolute;
top: 0;
left: 0;
bottom: 0;
vs2010学生版产品密钥
right: 0;
margin: auto;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function () {
//可使⽤jquery动态添加遮罩及loading效果
// var loading = '<div class="loading"><div class="pic"></div></div>';
//$("body").append(loading);
//启动⼀个定时器
setInterval(function(){
$(".loading").fadeOut();//3秒之后影藏
pg数据库为什么比mysql快},3000)
})
</script>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<p>使⽤定时器的⽅法（不会判断页⾯加载，只是在定时器完成之后将也⾯显⽰出来）</p>
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1536779145193&di=88f99c68903b47c4e386755b73893335&imgtyp e=0&src=http%3A%2F%2Fimg.pconline%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1212%2F21%2Fc2%2F16781720_135607942097 9.jpg" alt=""/>
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1536779184701&di=f3ab80235c5ddf5adb9d6b06ce47e82c&imgtyp e=0&src=http%3A%2F%2Fattachments.gfan%2Fforum%2Fattachments2%2Fday_110730%2F110730052814920f360299a915.jpg" alt="">
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1536779211730&di=4c244c8bd60f74b1832625e27c063fc0&imgtyp e=0&src=http%3A%2F%2Fi3.download.fd.pchome%2Ft_960x600%2Fg1%2FM00%2F09%2F12%2FoYYBAFO6NYCIE0tSAAdYOvon7RoAABtkwF4hgI AB1hS650.jpg" alt="">
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1536779225935&di=4c13b2276bbe03877d4c5ea0cc56cc98&imgtyp e=0&src=http%3A%arket%2Fapp0%2F652%2F652549%2Fscreen%2F3260012.png" alt="">
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1536779271901&di=3ccda1af260cf969189de3f52ea31686&imgtype =0&src=http%3A%qmx%3A82%2F2015%2F0526%2F14%2F02.jpg%2521720.jpg" alt="">
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1536779311038&di=0599243d4fe87313ed37ee416cd73d6a&imgty pe=0&src=http%3A%2F%%2Fd%2Ffile%2Fwallpaper%2Fscenery%2F20170105%2F2647448be73294d17c28d91407661f8c.jpg" alt=""> <img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1536779320074&di=ec9d10c18c21daec3b89b5573c22ef0f&imgtyp e=0&src=http%3A%2F%2Fpicture.ik123%2Fuploads%2Fallimg%2F170320%2F3-1F320150H5.jpg" alt="">
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1536779349967&di=11eaaee20a3da68abf58938bdad012e0&imgty pe=0&src=http%3A%2F%2Fpic1.win4000%2Fwallpaper%2F2017-11-29%2F5a1e13119deee.jpg" alt="">
</body>
</html>
**
这种⽅法是直接给⼀个时间，等结束以后，加载效果消失。但是这种⽅法并不能判断页⾯是否已经加载完毕，虽然简单粗暴，但显然这并不是我们想要的结果；
2.根据页⾯是否加载完毕来关闭loading效果：
⾸先，咱们要想知道页⾯是否加载完毕，需要知道以下⼏点：
adystatechange 页⾯加载状态改变时的事件
adyState 页⾯当前⽂档的状态
1）.uninitialized 还未开始载⼊
2）.loading 载⼊中
3）.interactive 已加载，⽂档和永和可以开始交互
4）plete 载⼊完成
这⾥我们就不使⽤定时器的那种⽅法了，我们直接来判断页⾯是否加载完毕去决定loading效果的关闭与否，那么直接将第⼀个⽅法的js改为：
adyState=="complete"){//complete加载完成
$(".loading").fadeOut();
怎么把sqlyog改成中文版}
}
这种⽅法是咱们⽤到的最多的⽅法了，因为它能判断出来页⾯是否真的已经加载完毕。
3.⽤C3做进度条的效果jquery下载文件进度条
这个就要⽤transform属性以及animation动画了，上⾯两个⽅法⾥，都是⽤的gif图，那么这样⼀个加载的效果我们⽤C3怎么去实现呢？
说下⼤概思路吧，⾸先你肯定得写⼀个容器把进度条装进去：
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
然后再修改样式：
.loading{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{width: 50px;height: 50px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}
.loading .pic i{display: block;float: left;width: 6px;height: 50px;background-color: #399;margin: 0 2px;transform: scaleY(.4);animation: load 1.2s infinite;
}
.loading .pic i:nth-child(1){}
.loading .pic i:nth-child(2){animation-delay: .1s; }
.loading .pic i:nth-child(3){animation-delay: .2s;}
.loading .pic i:nth-child(4){animation-delay: .3s;}
.loading .pic i:nth-child(5){animation-delay: .4s;}
java编程为什么要安装jdk@keyframes load{
0%,40%,100%{transform: scaleY(.4);}
20%{transform: scaleY(1);}
}
写好这些以后，动画就已经产⽣了。
再下来将第⼆种⽅法的js粘贴过来，就达到了⽤CSS3来实现页⾯加载的⼀个动画效果了。
4.还有⼀种加载⽅式时，实时获取加载数据，就是百分数的那种效果，⽐如这样：
这种效果在页⾯中也⽐较常见，也是⽤css3做的，代码如下：
⾸先，先给⼀个容器⽤来装进度条：
<div class="loading">
<div class="pic">
<span></span>
<b>0%</b>
</div>
</div>
然后写对应的样式及动画：
*{
margin:0;
padding: 0;
}
.
loading{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{width: 100px;height: 100px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;font-size: 30px;text-align: center;line-height: 100px;} .loading .pic span{display: block;width: 80px;height: 80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;box-shadow: 0 3px 0 #666;animation: r otate 1s infinite linear;-webkit-animation: rotate 1s infinite linear;
}
@-webkit-keyframes rotate{
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
@keyframes rotate{
100%{transform: rotate(360deg);}
}；
那么现在打开浏览器以后呈现在眼前的是⼀个单调的转圈的动画，所以接下来我们还得写js：
$(function () {
var img = $("img");//⾸先获取所有的Img对象
var num = 0;//定义⼀个变量，赋值给b标签⽤
img.each(function(i){//遍历获取到的所有img
var oImg = new Image();//new⼀个新对象
num++;//每次加载的过程中num++，即执⾏次数
$(".loading b").html(parseInt(num/$("img").size()*100)+"%");//改变b标签的内容，⽤num除以img的个数，再乘以100，再取整，这就是加载的百分数 if(num >= i){
$(".loading").fadeOut();//当num的值⼤于等于个数时隐藏
}
}
oImg.src = img[i].src;//预加载，先指定⼀个img.src，当onload成功以后可以将数据指定到某⼀个元素或者图⽚上，或者返回⼀个结果
})
})
OK，完成（⼀定记得要引jQuery，当然⽤原⽣就不⽤引了）。
：Coder 杂谈，欢迎关注
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论