博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
网页加载进度条
阅读量：7176 次
发布时间：2019-06-29

本文共 8081 字，大约阅读时间需要 26 分钟。

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" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3830386001,736798514&fm=27&gp=0.jpg" alt="">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=587888118,2917436442&fm=27&gp=0.jpg" alt="">
<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" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3830386001,736798514&fm=27&gp=0.jpg" alt="">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=587888118,2917436442&fm=27&gp=0.jpg" alt="">
<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" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3830386001,736798514&fm=27&gp=0.jpg" alt="">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=587888118,2917436442&fm=27&gp=0.jpg" alt="">
<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" alt="">
</header>
<script>
$('.loading .pic').animate({width:'10%'},100)
</script>

<section class='one'>

<img src="http://img1.3lian.com/2015/a2/53/d/25.jpg" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
</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" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3830386001,736798514&fm=27&gp=0.jpg" alt="">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=587888118,2917436442&fm=27&gp=0.jpg" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2724397080,1020351099&fm=11&gp=0.jpg" alt="">
<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.οnlοad=function(){
oImg.οnlοad=null;
num++;
$('.pic').html(parseInt(num/$('img').length*100)+"%");
if(num>=i){
$('.loading').fadeOut();
}
}
oImg.src=img[i].src;
})
})
</script>
</body>
</html>

复制代码

 

自己写的demo,欢迎指导

转载于:https://www.cnblogs.com/520BigBear/p/8056883.html

你可能感兴趣的文章
表单（打开单据、列表、动态表单、简单、SQL帐表）示例代码
查看>>
hadoop Partitioner 分区
查看>>
python中的zip函数
查看>>
时尚圈的AI变革与冒险：被人工智能重新定义的奢侈感
查看>>
ORA-00600: [qksrcBuildRwo]内部错误一例
查看>>
RAID磁盘阵列
查看>>
SEO优化：WordPress站点地图（html和xml）插件Baidu Sitemap Generator
查看>>
mysql重置密码
查看>>
java 时间处理
查看>>
Linux 配置IP地址，子网，网关，DNS，linux远程， wget 下载工具
查看>>
linux下一个简单的基于IPv6（UDP）的回显服务器程序
查看>>
Xtrabackup实现数据的备份与恢复
查看>>
virtulbox安装win10 64bit不能正常设置分辨率1366*768的解决方案
查看>>
大数据|| 分布式协作服务框架Zookeeper分布式安装部署
查看>>
Python爬虫爬数据写入到文件
查看>>
生成自己的Alphanumeric/Printable shellcode
查看>>
linux--nfs 网络文件共享
查看>>
Cisco课程1
查看>>
jenkins邮件发送
查看>>
Python 操作符
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-02-11 09:32:24   当前IP: 3.145.93.203   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我