华山资源网

jquery网页加载进度条的实现
网络编程 2024/11/15 佚名
3 1

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

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();   
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com