常见的网页加载进度条
我们为什么要做网页加载进度条？ 是为了让用户的等待不再枯燥，让用户有一个等待的目标. 为什么要页面加载？ 这些网站打开后网页上面需要加载一些控件以使网页上的一些程序能够执行，从而显现出相应的效果，如在线播放的视频、FLASH都属于这种情况，不同的效果对应的不同运行程序，这些运行程序你要看是哪里开发的，有些是安全的，比如一些大家都知道的，像FLASH或者REAL的，但所有这些实际上都是要求在你的计算机上面下载并[执行程序]，原则上都是不安全的。
我们先用一个定时器做一个页面加载（缺点：页面加载时间是死的,无法根据内容多少来判断是否要加载多长时间！！）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script type="text/javascript" src="css/jquery1.js">
</script>
<style type="text/css">
*{
margin: 0;
padding: 0 ;
}
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: white;
}
.loading .pic{
width: 64px;
height: 64px;
background: url("images/25.gif");
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<div class="loading">
<div class="pic">
</div>
</div>
<body>
.....
<script type="text/javascript">
$(function(){
setInterval(function(){
$(".loading").fadeOut();
},3000)
})
</script>
</body>
</html>用一个简单的js代码来做一个页面加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
*{
margin: 0;
padding: 0 ;
}
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: white;
}
.loading .pic{
width: 64px;
height: 64px;
background: url("images/25.gif");
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="css/jquery1.js"></script>
<script type="text/javascript">
//document.onreadystatechange页面加载状态改变时的事件
document.onreadystatechange=function(){
if(document.readyState=="complete");{
$(".loading").fadeOut();
}
}
</script>
</head>
<body>
<div class="loading">
<div class="pic">
</div>
</div>
.....
</body>
</html>接下来教大家做一个定位在头部的进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: white;
}
.loading .pic{
width: 0%;//起始是0
height: 5px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: red
}
</style>
<script type="text/javascript" src="css/jquery1.js"></script>
</head>
<body>
<div class="loading">
<div class="pic">
</div>
</div>
<header>
.....
</header>
<script type="text/javascript">
$(".loading .pic").animate({width:"10%"},100) //每加载一个内容就运行一次js
</script>
<banner>
.....
</banner>
<script type="text/javascript">
$(".loading .pic").animate({width:"40%"},100)
</script>
<section>
.....
</section>
<script type="text/javascript">
$(".loading .pic").animate({width:"70%"},100)
</script>
<div class="main">
.....
</div>
<script type="text/javascript">
$(".loading .pic").animate({width:"100%"},100,function(){
$(".loading").fadeOut();//运行完成 隐藏进度条
}
)
</script>
</body>
</html>实时获取加载数值的进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时获取</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: white;
}
.loading .pic{
width: 0%;
height: 5px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: palegreen;
font-size: 30px;
text-align:center;
line-height: 100px;
}
.loading .pic span{
display: block;
width: 80px;
height: 80px;
position: absolute;
top: 10px;
left: -10px;
box-shadow: 0 3px 0 #666 ;
border-radius: 50%;
animation:rotate 1s infinite linear ;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
img{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="css/jquery1.js"></script>
<script>
$(function(){
var img=$("img");
var num=0;
img.each(function(i){
var oImg=new Image();
oImg.onload=function(){
oImg.onload=null;//清除图片多次请求
num++;
//获取数值并将数值显示出来
$(".loading b").html(parseInt(num/$("img").size()*100)+"%");
if(num>=i){
$(".loading").fadeOut();
}
}
oImg.src=img[i].src;
})
})
</script>
</head>
<body>
<div class="loading">
<div class="pic">
<span id="">
</span>
<b>0%</b>
</div>
</div>
<img src=“”图片“”>
<img src=“”图片“”>
<img src=“”图片“”>
<img src=“”图片“”>
<img src=“”图片“”>
<img src=“”图片“”>
<img src=“”图片“”>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.10.12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读