总结了一些网页加载进度的实现方式……

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基础的更多相关文章

  1. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  2. 【css系列】创建网页加载进度条

    一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <ht ...

  3. HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等

    今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

  4. 用document.readyState实现网页加载进度条

    概述 之前以为给网页设置加载进度条很麻烦,今天一学真是超级简单,记录下来供以后开发时参考,相信对其他人也有用. readyState 主要运用了document.readyState和nprogres ...

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

    一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView ...

  6. Jquery网页加载进度条（随笔，当然要随便写，当日记动态心情写咯）

    首先先是吐槽时间... 告诉大家一个好消息,就是有个妹子非常仰慕我的前端技术说要包养我 然后有好多羡慕嫉妒恨的童鞋一定要说,少年你太天真了,那一定是HR 然后我表示她不是HR,本宅的春天貌似要到来了. ...

  7. jQuery网页加载进度条插件

    jquery.pace.js会自动监测你的Ajax请求,事件循环滞后,记录您的页面上准备状态和元素来决定的进度情况. 将pace.js和主题css的添加到您的网页! pace.js会自动监测你的Aja ...

  8. JS网页加载进度条

    参考:http://www.cnblogs.com/timy/archive/2011/12/07/2279200.html

  9. 对WEB标准以及W3C的理解与认识 - 提高网页加载速度

    在写代码的时候应该注意: 1.标签闭合 2.标签小写 3.不能随意嵌套 提高被搜索引擎搜到几率: mate中的name变量[其中keywords和description尤其重要] Meta name= ...

随机推荐

  1. 监督学习：随机梯度下降算法（sgd）和批梯度下降算法（bgd）

    线性回归 首先要明白什么是回归.回归的目的是通过几个已知数据来预测另一个数值型数据的目标值. 假设特征和结果满足线性关系,即满足一个计算公式h(x),这个公式的自变量就是已知的数据x,函数值h(x)就 ...

  2. 学习docker on windows (1): 为什么要使用docker

    为什么要用Docker? 如果我们想使用某种pc软件, 那么在互联网上查找并安装软件的流程大致如下图: 那么这就有几个问题要弄清楚: 从哪里获得软件 App Store Linux的包管理 从某些网站 ...

  3. 解决java.lang.IllegalArgumentException: No converter found for return value of type: class java.util.ArrayList这个问题

    今天使用SSM框架,用@ResponseBody注解,出现了这个问题 java.lang.IllegalArgumentException: No converter found for return ...

  4. url路径去掉两个opencms

    采用刚刚的方法安装OpenCMS之后,站点url中会存在两个opencms,造成访问url路径过长,下面讲解一种去掉两个opencms的方法. 1.去掉第一个opencms 安装时采用ROOT安装,即 ...

  5. ubuntu16.04编译安装mysql-boost-5.7.21并编译成php扩展测试与使用

    我之前的文章已经改造了自定义MVC框架中的工具类(验证码,图片上传,图像处理,分类)4个类,接下来,就要改造模型类,模型类肯定要连接数据库,由于我的Ubuntu Linux是裸装的php(目前只编译了 ...

  6. windows系统下安装node

    最近项目中需要使用到vue框架来实现前后端分离,于是抽时间看了下vue的相关只是,从官网了解到可以使用命令行工具(CLI)来构建应用,于是在本地环境预练了一下 下面这句话摘抄自vue文档: Vue.j ...

  7. Create小程序

    我有时候喜欢直接用命令行创建.编译.执行java文件, 每次创建一个文件都要新建一个.java文件,然后再编辑.java文件加入类名,主函数…… 这些流程我有点厌倦,于是就编写了一个超级简单的自动创建 ...

  8. PAT 1003. Emergency 单源最短路

    思路:定义表示到达i的最短路径数量,表示到达i的最短径,表示最短路径到达i的最多人数,表示从i到j的距离, 表示i点的人数.每次从u去更新某个节点v的时候,考虑两种情况: 1.,说明到达v新的最短路径 ...

  9. UESTC 251 最长上升子序列O（nlgn）

    O(n^2)过不了.必须要用一个额外的数组保存当前长度最小值,然后lgn查表 AC代码 #include<cstdio> #include<algorithm> using n ...

  10. CodeForces-748D 贪心

    这题的思维难度不是很大,属于编程实现细节处理较多的题. 暂且把每个字符串的"beauty"称为魅力值,用一个优先队列数组将同一个字符串的所有魅力值保存,通过map将不同字符串编号, ...