jquery网页加载进度条的实现


Posted in jQuery onJune 01, 2017

本次主要介绍一下网页加载进度的实现。如下图,在页面加载的时候,上方红色的进度条

jquery网页加载进度条的实现

网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果。

首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现0-100%的加载显示过程。

因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行大概的模糊进度反馈来实现进度加载的效果。大致意思是:页面每加载到指定区域,则返回(n)%的进度结果,通过设置多个节点,来达到一步一步显示加载进度的目的。

假如有一个页面,按区块分为页头、左侧内容、右边侧栏、页脚四部分,我们把这四部分作为四个节点,当页面加载每一个节点后,设置大概加载百分比,页面结构如下:

<div id="header"> 
页头部分 
</div> 
<div id="mainpage"> 
左侧内容 
</div> 
<div id="sider"> 
右边侧栏 
</div> 
<div id="footer"> 
页脚部分 
</div>

然后我们在下的第一行加上进度条.loading。

<div class="loading"></div>

我们要设置loading进度条的样式,设置背景色,高度,以及位置,优先级等。

.loading{ 
  background:#FF6100; //设置进度条的颜色 
  height:5px; //设置进度条的高度 
  position:fixed; //设定进度条跟随屏幕滚动 
  top:0; //将进度条固定在页面顶部 
  z-index:99999 //提高进度条的优先层级,避免被其他层遮挡 
}

接下来,我们要在每个节点后面加上进度动画,使用jQuery来实现。

<div id="header"> 
页头部分 
</div> 
<script type="text/javascript"> 
  $('.loading').animate({'width':'33%'},50); //第一个进度节点 
</script> 
<div id="mainpage"> 
左侧内容 
</div> 
<script type="text/javascript"> 
  $('.loading').animate({'width':'55%'},50); //第二个进度节点 
</script> 
<div id="sider"> 
右边侧栏 
</div> 
<script type="text/javascript"> 
  $('.loading').animate({'width':'80%'},50); //第三个进度节点 
</script> 
<div id="footer"> 
页脚部分 
</div> 
<script type="text/javascript"> 
  $('.loading').animate({'width':'100%'},50); //第四个进度节点 
</script>

可以看出,每加载一个节点后,jQuery调用animate()动画方法实现进度条宽度的变化,每个节点变化以50毫秒时间让进度条看起来更流畅些,最终从0%变化到100%,完成了进度条的进度动画。

当进度条达到100%后,页面加载完成,最后还有一步要做的就是隐藏进度条。

$(document).ready(function(){ 
  $('.loading').fadeOut();   
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
jQuery实现动态删除LI的方法
May 30 #jQuery
jQuery异步提交表单实例
May 30 #jQuery
Angular2使用jQuery的方法教程
May 28 #jQuery
Jquery中attr与prop的区别详解
May 27 #jQuery
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 #jQuery
You might like
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php 保留字列表
2012/10/04 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
AngularJS发送异步Get/Post请求方法
2018/08/13 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python操作SQLite简明教程
2014/07/10 Python
python继承和抽象类的实现方法
2015/01/14 Python
如何在Python中编写并发程序
2016/02/27 Python
如何将python中的List转化成dictionary
2016/08/15 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python接入支付宝的实例操作
2020/07/20 Python
调解员先进事迹材料
2014/02/07 职场文书
违反交通法规检讨书
2014/09/10 职场文书
出差报告范文
2014/11/06 职场文书
旗帜观后感
2015/06/08 职场文书
读书笔记怎么写
2015/07/01 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
深入理解python协程
2021/06/15 Python