jquery网页加载进度条的实现

这次，我们主要介绍网页加载进度的实现。如下所示，当页面被加载时，顶部的红色进度条

网页加载进度的好处是可以更好的反映当前网页加载进度。加载进度条可以以动画的形式完成从0%到100%的网页加载过程。但是目前的浏览器没有提供页面加载进度的界面，这意味着页面无法准确返回页面的实际加载进度。本文使用jQuery来实现页面加载进度条的效果。

首先，我们需要知道，没有浏览器可以直接获取被加载对象的大小。因此，我们无法通过数据大小实现0-100%的加载和显示过程。

因此需要逐行加载html代码，在整页代码的几个跳转行中设置节点，给出粗糙模糊的进度反馈，达到进度加载的效果。大致意思是，每次页面加载到指定区域，都会返回(n)%进度结果。通过设置多个节点，可以逐步显示加载进度。

如果有页面，则按块分为四个部分：页眉、左侧内容、右侧边栏和页脚。我们把这四个部分作为四个节点。加载每个节点后，设置大致的加载百分比。页面结构如下：

Div id='header '页眉部分/div div id='mainpage '左侧内容div id=' sider '右侧边栏/div div id='页脚部分/div然后我们添加一个进度条。

Div class='loading'/div我们要设置加载进度条的样式，设置背景颜色、高度、位置、优先级等。正在加载{ background: # FF6100//设置进度条：5px的颜色高度；//将进度条位置的高度设置为： fixed；//将进度条设置为随屏幕滚动到top:0//修复页面z-index:9999顶部的进度条//提高进度条的优先级，避免被其他图层阻挡。}接下来，我们需要在每个节点后面添加进度动画，并使用jQuery实现。

Div id='header '页头/div脚本类型=' text/JavaScript' $('。正在加载')。动画({'width' :' 33%'}，50)；//第一个进度节点/脚本div id='mainpage '左侧内容/div脚本类型=' text/JavaScript' $('。正在加载')。动画({'width' :' 55%'}，50)；//第二个进度节点/脚本div id='sider '右侧边栏/div脚本类型=' text/JavaScript' $('。正在加载')。动画({'width' :' 80%'}，50)；//第三个进度节点/脚本div id='footer' footer/div脚本类型=' text/JavaScript' $(')。正在加载')。动画({'width' :' 100%'}，50)；//从第四个进度节点/脚本可以看到，jQuery在加载每个节点后调用animate () animation方法改变进度条的宽度，每个节点在50毫秒内变化，使进度条看起来更平滑，最后从0%变化到100%，从而完成进度条的进度动画。

当进度条达到100%时，页面被加载，最后一步是隐藏进度条。

$(文档)。ready(function(){ $(')。正在加载')。fade out()；});以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。