网页加载进度条

摘要:
--缺点:无论是否存在缓存,都必须执行指定的事件,这是不切实际的--˃。加载{100%;高度:100%;位置:固定;顶部:0;左侧:0;z索引:100;背景颜色:#fff;}加载。图片{80px;高度:80px,背景:url,背景大小:100%100%,位置:绝对,顶部:0,底部:0,左侧:0,右侧:0,边距:自动;}$2.加载状态事件生成的进度条-1代码:加载状态事件创建的进度条1代码˂!

1. 定时器的进度条

代码:

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器的进度条</title>
<!-- 弊端:无论有没有缓存都要执行规定的事件,不切合实际-->
<style>
.loading{ 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{ 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="http://t.zoukankan.com/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{ 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{ 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="http://t.zoukankan.com/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{ 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{ 50px;height: 50px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin:auto;}
.loading .pic i{float: left; 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{ 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{ 50px;height: 50px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin:auto;}
.loading .pic i{float: left; 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="http://t.zoukankan.com/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{ 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{ 0%;height: 5px;position: absolute;top: 0;left: 0;background-color: red;}
</style>
<script src="http://t.zoukankan.com/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({'10%'},100)
</script>

<section class='one'>
<img src="http://img1.3lian.com/2015/a2/53/d/25.jpg" alt="">
</section>
<script>
$('.loading .pic').animate({'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({'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({'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({'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({'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{ 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{ 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="http://t.zoukankan.com/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,欢迎指导

免责声明:文章转载自《网页加载进度条》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇pb菜单详解和MDIWindows 8.1安装 Vmware10下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

VMware vSphere 7.0 安装教程

插入CD,启动系统并等待安装包加载映像,按Enter等待协议条款,同意,然后按F11进行磁盘分区管理。由于测试环境的原因,只有一个硬盘,直接按Enter键进入键盘布局,选择默认设置,按Enter键设置根帐户的密码,输入完成后按Enter键确认安装,按F11键等待安装完成,取出安装CD,重新启动后按Enter重新启动系统,正在加载到系统中…请确保已导入磁盘。错...

jquery跨域请求数据

Jquery跨域请求数据Jquery跨请求数据。事实上,这很容易。请遵循以下步骤:首先,编写js,通过get获取远程数据。请注意,回调参数应添加在链接之后,这意味着将回调函数地址传输到远程页面。',{params},函数cb{alert;alert;},'json');第二:编写处理程序。publicvoidProcessRequest{context.Re...

uniapp安卓真机调试提示检测不到手机【解决办法】

以下是具体的解决方案:步骤1:打开、查找、单击并单击7次或更多次,以允许开发人员进行选择。...

Crontab详细用法-定时任务详解

LWC“八个字符,有效范围为0-31个月的整数:可以出现”,-*/“四个字符,无效范围为1-12或JAN DECDayofWeek:可以出现”。-*/?因为月日和周日将相互影响。例如,在“分钟”字段中使用5,20表示它将在每分钟的5和20分钟触发一次。50:表示它只能出现在周日和月日域中。如果在DayofWeek域中使用5L,这意味着它将在最后一个星期四触发...

ArcGIS 基础4-删除数据

本文来自ESRI官方资源,为刚开始使用ArcMap软件的学生提供帮助。DATAUsing_ ArcMap文件夹。此时,右侧区域显示文件夹的内容。内容2.删除数据。在练习数据中选择社区Mxd此地图文档,数据位置…DATAUsing_ArcMap打开ArcMap。在内容列表中,选择要删除的数据,然后单击鼠标右键选择“删除”。...

Android 9.0 系统启动流程

1、 启动过程概述II、Android启动分析III、init进程启动分析IV、init启动脚本分析V、init进程分析VI、init脚本执行VII、init进程守护程序VIII、initrc脚本启动Zygote IX、启动分析摘要I、启动过程概述Android启动过程与Linux启动类似,并将首先在系统中查找init.rc文件(大多数文件存储在/syste...