网页加载进度条

Posted 大熊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页加载进度条相关的知识，希望对你有一定的参考价值。

1. 定时器的进度条       

代码:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器的进度条</title>
<!-- 弊端:无论有没有缓存都要执行规定的事件,不切合实际-->
<style>
.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{width: 80px;height: 80px;background: url(img/798.gif);background-size: 100% 100%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin:auto;}
</style>
</head>
<body>
<!-- <div class="loading">
<div class="pic"></div>
</div> -->
<!-- 上面这个也可以写在js中,然后append添加进去 -->
<img src="http://img1.3lian.com/2015/a2/53/d/25.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3830386001,736798514&fm=27&gp=0.jpg" >
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=587888118,2917436442&fm=27&gp=0.jpg" >
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
var loading=‘<div class="loading"><div class="pic"></div></div>‘;
$(‘body‘).append(loading);
setInterval(function(){
$(".loading").fadeOut();
},3000)
})
</script>
</body>
</html>

技术分享图片

 

2. 通过加载状态事件制作的进度条-1(简单粗暴,用的最多)

代码:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过加载状态事件制作的进度条-1(简单粗暴,用的最多)</title>
<!-- 优点:当内容真正加载完毕之后再显示 内容,切合实际;
1. document.onreadystatechange :页面加载状态改变时的事件;
2. document.readyState :返回当前文档的状态,他有四个状态 ① uninitialized 还未开始载入;② loading 载入中; ③ interactive 已加载,文档和用户可以开始交互; ④ complete 载入完成 -->
<style>
.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{width: 80px;height: 80px;background: url(img/798.gif);background-size:cover;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin:auto;}
</style>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<img src="http://img1.3lian.com/2015/a2/53/d/25.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3830386001,736798514&fm=27&gp=0.jpg" >
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=587888118,2917436442&fm=27&gp=0.jpg" >
<script src="js/jquery-3.2.1.min.js"></script>
<script>
document.onreadystatechange=function(){
if(document.readyState==‘complete‘){
$(‘.loading‘).fadeOut(1000);
}
}
</script>
</body>
</html>

技术分享图片

 

3. 通过加载状态事件制作的进度条-2(结合css3动画)

代码:

技术分享图片
 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过加载状态事件制作的进度条-2(结合css3动画)</title>
<style>
/*.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;bottom: 0;left: 0;right: 0;margin:auto;}
.loading .pic i{float: left;width: 6px;height: 50px;background-color: blue;margin: 0 2px;transform:scaleY(0.4);animation:load666 1.2s infinite;}
.loading .pic i:nth-child(1){}
.loading .pic i:nth-child(2){animation-delay:0.1s;}
.loading .pic i:nth-child(3){animation-delay:0.2s;}
.loading .pic i:nth-child(4){animation-delay:0.3s;}
.loading .pic i:nth-child(5){animation-delay:0.4s;}
@keyframes load666{
0%,40%,100%{transform:scaleY(0.4);}
20%{transform:scaleY(1);}
}*/
/*兼容写法*/
.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;bottom: 0;left: 0;right: 0;margin:auto;}
.loading .pic i{float: left;width: 6px;height: 50px;background-color: blue;margin: 0 2px;-webkit-transform:scaleY(0.4);-ms-transform:scaleY(0.4);transform:scaleY(0.4);-webkit-animation:load666 1.2s infinite;animation:load666 1.2s infinite;}
.loading .pic i:nth-child(1){}
.loading .pic i:nth-child(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}
.loading .pic i:nth-child(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.loading .pic i:nth-child(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.loading .pic i:nth-child(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;}
@-webkit-keyframes load666{
0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4);}
20%{-webkit-transform:scaleY(1);transform:scaleY(1);}
}
@keyframes load666{
0%,40%,100%{-webkit-transform:scaleY(0.4);transform:scaleY(0.4);}
20%{-webkit-transform:scaleY(1);transform:scaleY(1);}
}
</style>
</head>
<body>
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<img src="http://img1.3lian.com/2015/a2/53/d/25.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3830386001,736798514&fm=27&gp=0.jpg" >
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=587888118,2917436442&fm=27&gp=0.jpg" >
<script src="js/jquery-3.2.1.min.js"></script>
<script>
document.onreadystatechange=function(){
if(document.readyState==‘complete‘){
$(‘.loading‘).fadeOut();
}
}
</script>
</body>
</html>

技术分享图片

 

4. 通过加载状态事件制作的进度条-3(结合css3动画+定位在头部的进度条)

代码:

技术分享图片
 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过加载状态事件制作的进度条-3(结合css3动画+定位在头部的进度条)</title>
<style>
.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{width: 0%;height: 5px;position: absolute;top: 0;left: 0;background-color: red;}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<header>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2724397080,1020351099&fm=11&gp=0.jpg" >
</header>
<script>
$(‘.loading .pic‘).animate({width:‘10%‘},100)
</script>

<section class=‘one‘>
<img src="http://img1.3lian.com/2015/a2/53/d/25.jpg" >
</section>
<script>
$(‘.loading .pic‘).animate({width:‘30%‘},100)
</script>

<section class=‘two‘>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3830386001,736798514&fm=27&gp=0.jpg" >
</section>
<script>
$(‘.loading .pic‘).animate({width:‘50%‘},100)
</script>

<section class=‘three‘>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=587888118,2917436442&fm=27&gp=0.jpg" >
</section>
<script>
$(‘.loading .pic‘).animate({width:‘70%‘},100)
</script>

<section class=‘four‘>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513342034632&di=0e6fbf2e0c9d63d62a2f3233a6e28547&imgtype=0&src=http%3A%2F%2Fwww.pp3.cn%2Fuploads%2F201608%2F20160807013.jpg" >
</section>
<script>
$(‘.loading .pic‘).animate({width:‘90%‘},100)
</script>

<footer>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513936732&di=a7cdeec48399494fdd2f6fe337fa8816&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.pp3.cn%2Fuploads%2F201410%2F2014102505.jpg" >
</footer>
<script>
$(‘.loading .pic‘).animate({width:‘100%‘},100,function(){
$(‘.loading‘).fadeOut();
})
</script>

</body>
</html>

技术分享图片

 

5. 实时获取加载数据的进度条

代码:

技术分享图片
 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实时获取加载数据的进度条</title>
<style>
*{padding: 0;margin: 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;bottom: 0;left: 0;right: 0;margin:auto;border: 1px solid #000;background-image: url(img/89.gif);background-size: cover;line-height: 100px;text-align: center;font-size: 20px;}
</style>
</head>
<body>
<div class="loading">
<div class="pic">0%</div>
</div>
<img src="http://img1.3lian.com/2015/a2/53/d/25.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3830386001,736798514&fm=27&gp=0.jpg" >
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=587888118,2917436442&fm=27&gp=0.jpg" >
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2724397080,1020351099&fm=11&gp=0.jpg" >
<script src="js/jquery-3.2.1.min.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++;
$(‘.pic‘).html(parseInt(num/$(‘img‘).length*100)+"%");
if(num>=i){
$(‘.loading‘).fadeOut();
}
}
oImg.src=img[i].src;
})
})
</script>
</body>
</html>

技术分享图片

 

自己写的demo,欢迎指导
















































































































































































































以上是关于网页加载进度条的主要内容，如果未能解决你的问题，请参考以下文章

常用的网页加载进度条

iOS WKWebView添加网页加载进度条(转)

网页加载进度条

常见的网页加载进度条

android中webview 怎么实现网页加载时显示加载进度

网页插入SWF视频，如何带有播放控制按钮、进度条等！