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.load()和Jsp的include的区别
Apr 12 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
zf框架db类的分页示例分享
2014/03/14 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
浅析Python的命名空间与作用域
2020/11/25 Python
耐克中国官方商城:Nike中国
2018/10/18 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
运动会四百米广播稿
2014/01/19 职场文书
春节请假条
2014/04/11 职场文书
捐款通知怎么写
2015/04/24 职场文书
法定代表人资格证明书
2015/06/18 职场文书
react中的DOM操作实现
2021/06/30 Javascript
Python基本的内置数据类型及使用方法
2022/04/13 Python
postgresql中如何执行sql文件
2023/05/08 PostgreSQL