网页加载进度的实现--JavaScript基础
总结了一些网页加载进度的实现方式……
1、定时器实现加载进度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器实现进度条</title>
<style>
*{margin:0;padding:0}
.loading{width: 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
.loading .pic{width:64px;height:64px;background-image: url("images/loading.gif");position: absolute;
left: 0;top:0;bottom:0;right: 0;margin: auto;}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</body>
<script>
$(function () {
setInterval(function () {
$('.loading').fadeOut();
},3000)
})
// var load = '<div class="loading"> <div class="pic"></div> </div>';
// $('body').append(load);
// $(function () {
// setInterval(function () {
// $('.loading').fadeOut();
// },3000)
// })
</script>
</html>
效果图:
2、通过加载状态事件实现加载进度
readyState定义和用法:
readyState 属性返回当前文档的状态(载入中……)。
该属性返回以下值:
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载,文档与用户可以开始交互
complete - 载入完成
语法:document.readyState
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过加载状态事件来实现加载进度</title>
<style>
*{margin:0;padding:0}
.loading{width: 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
.loading .pic{width:64px;height:64px;background-image: url("images/loading.gif");position: absolute;left: 0;top:0;bottom:0;right: 0;margin: auto;}
</style>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
document.onreadystatechange = function () {
if(document.readyState == 'complete'){
$('.loading').fadeOut();
}
}
</script>
</head>
<body>
<div class="loading"> <div class="pic"></div></div>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</body>
</html>
效果图:
3、加载状态事件结合css3进度条动画实现加载进度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3进度条动画</title>
<style>
*{margin:0;padding:0}
.loading{width: 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
.loading .pic{width:50px;height:50px;position: absolute;left: 0;top:0;bottom:0;right: 0;margin: auto;}
.loading .pic i{display: block;width: 6px;height: 50px;background-color: #399;float: left;margin: 0 2px;
-webkit-transform: scaleY(0.4);-ms-transform: scaleY(0.4);transform: scaleY(0.4);-webkit-animation: loading 1.2s infinite;animation: loading 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 loading {
0%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
20%{-webkit-transform: scaleY(1);transform: scaleY(1)}
50%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
}
@keyframes loading {
0%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
20%{-webkit-transform: scaleY(1);transform: scaleY(1)}
50%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)}
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
document.onreadystatechange = function () {
if(document.readyState == 'complete'){
$('.loading').fadeOut();
}
}
</script>
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</body>
</html>
效果图:
4、通过定位在头部的进度条实现加载的进度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位在头部的进度条</title>
<style>
*{padding: 0;margin: 0;}
.loading{width: 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
.loading .pic{width:0;height:4px;position: absolute;left: 0;top:0;background-color: #f33;}
</style>
</head>
<body>
<div class="loading"> <div class="pic"></div></div>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<header>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</header>
<script>
$(".loading .pic").animate({width:'30%'},100)
</script>
<section class="banner">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</section>
<script>
$(".loading .pic").animate({width:'30%'},100)
</script>
<section class="aboout">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</section>
<script>
$(".loading .pic").animate({width:'50%'},100)
</script>
<section class="pro">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</section>
<script>
$(".loading .pic").animate({width:'70%'},100)
</script>
<section class="new">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</section>
<script>
$(".loading .pic").animate({width:'90%'},100)
</script>
<footer>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=429122487,3210940336&fm=200&gp=0.jpg">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1517729420,3900474631&fm=27&gp=0.jpg">
</footer>
<script>
$(".loading .pic").animate({width:'100%'},100,function () {
$(".loading").fadeOut();
})
</script>
</body>
</html>
效果图:
5、通过实时获取加载数据实现加载进度
建立图像对象:图像对象名称 = new Image();
属性:border complete height
事件:onload onerror onkeydown okeypress……
src属性要写到onload后面,否则程序在IE中会出错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实时获取加载数据实现加载进度</title>
<style>
*{padding: 0;margin: 0;}
.loading{width: 100%;height: 100%;position: fixed;left: 0;top:0;z-index: 100;background-color: white;}
.loading .pic{width:80px;height:80px;position: absolute;left: 0;top:0;right:0;bottom:0;margin:auto;text-align: center;}
.loading .pic span{width: 60px;height: 60px; position: absolute;left: 10px;top:10px;
border-radius: 50%;box-shadow: 0 3px 0 #666;animation: rotate 0.5s infinite linear;-webkit-animation:rotate 0.5s infinite linear}
.loading .pic b{font-size: 25px;line-height: 80px;}
@keyframes rotate {
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
@-webkit-keyframes {
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
</style>
<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++;
$('.loading .pic b').html(parseInt(num/$('img').length*100))+"%";
if (num >= i) {//判断所有图像加载完成的条件
$('.loading').fadeOut();
}
};
oImg.src=img[i].src;
})
})
</script>
</head>
<body>
<div class="loading">
<div class="pic">
<span></span>
<b>0%</b>
</div>
</div>
<img src="http://i03.pic.sogou.com/45ae2054bc16d73a">
<img src="http://i03.pic.sogou.com/fa3820a0be251630">
<img src="http://i04.pic.sogou.com/2ea901dbf2999081">
<img src="http://i03.pic.sogou.com/a53bcd45218a7330">
<img src="http://i03.pic.sogou.com/9a9e8866b05cf32f">
<img src="http://i03.pic.sogou.com/45ae2054bc16d73a">
<img src="http://i03.pic.sogou.com/fa3820a0be251630">
<img src="http://i04.pic.sogou.com/2ea901dbf2999081">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1863935812,3262346880&fm=27&gp=0.jpg">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=164104570,3489576029&fm=27&gp=0.jpg">
</body>
</html>
效果图:
源码文件下载:网页加载进度的实现.zip
网页加载进度的实现--JavaScript基础的更多相关文章
- 《动手实现一个网页加载进度loading》
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...
- 【css系列】创建网页加载进度条
一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <ht ...
- HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等
今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...
- 用document.readyState实现网页加载进度条
概述 之前以为给网页设置加载进度条很麻烦,今天一学真是超级简单,记录下来供以后开发时参考,相信对其他人也有用. readyState 主要运用了document.readyState和nprogres ...
- iOS WKWebView添加网页加载进度条(转)
一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView ...
- Jquery网页加载进度条(随笔,当然要随便写,当日记动态心情写咯)
首先先是吐槽时间... 告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我 然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR 然后我表示她不是HR,本宅的春天貌似要到来了. ...
- jQuery网页加载进度条插件
jquery.pace.js会自动监测你的Ajax请求,事件循环滞后,记录您的页面上准备状态和元素来决定的进度情况. 将pace.js和主题css的添加到您的网页! pace.js会自动监测你的Aja ...
- JS网页加载进度条
参考:http://www.cnblogs.com/timy/archive/2011/12/07/2279200.html
- 对WEB标准以及W3C的理解与认识 - 提高网页加载速度
在写代码的时候应该注意: 1.标签闭合 2.标签小写 3.不能随意嵌套 提高被搜索引擎搜到几率: mate中的name变量[其中keywords和description尤其重要] Meta name= ...
随机推荐
- pygame写贪吃蛇
python小白尝试写游戏.. 学了点pygame不知道那什么练手好,先拿贪吃蛇开刀吧. 一个游戏可以粗略的分为两个部分: 数据(变量) 处理数据(函数,方法) 设计变量 首先预想下,画面的那些部分需 ...
- 织梦使用if判断某个字段是否为空
织梦如何使用if判断某个字段是否为空呢?我们以文章页调用文章摘要为例: 使用if语句判断摘要是否为空,如果有摘要就显示摘要模块,如果没有就不显示 {dede:field.description run ...
- [记]Debian alias 设置, 不设置貌似有点不方便习惯
备忘录,记录下. 不知道 当前有那些 alias 的话 直接输入 alias ,回车就可以看到 alias 列表. 终端输入: vim ~/bash_aliases 然后输入: # some more ...
- NOI2009 二叉查找树 【区间dp】
[NOI2009]二叉查找树 [问题描述] 已知一棵特殊的二叉查找树.根据定义,该二叉查找树中每个结点的数据值都比它左子树结点的数据值大,而比它右子树结点的数据值小.另一方面,这棵查找树中每个结点都有 ...
- 微信小程序Md5加密(utf-8汉字无影响)
微信小程序不让使用第三方jqMD5 只好改原生js咯 废话不多说直接贴代码 其实就是将原生function调用改为 module.exports = md5; 文中 红色标注 使用方法 将md5.js ...
- Java文件及文件夹的创建与删除
功能 这个实例实现了在D盘创建一个文件和文件夹,并删除它们. 函数介绍 createNewFile():当文件不存在时,根据绝对路径创建该文件. delete():删除文件或者文件夹. ...
- Five nines
Five nines, commonly taken to mean "99.999%", may refer to: 高可用 High availability of serv ...
- hbase 命令
HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase中的海量数据,利用Zookeeper作为协同服 ...
- mysql:联合查询
SELECT t1.name, t2.salary FROM employee AS t1 INNER JOIN info AS t2 ON t1.name = t2.name; 可以对数据表使用别 ...
- 深刻理解iosBlock
深刻理解iosBlock ///一个控制器里的方法 - (void)setRefreshHeader { ACWeakSelf(self); self.tableView.mj_header = [M ...