jquery ajax加载页面进度条,jquery网页加载进度条的实现

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

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

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

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

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

页头部分

左侧内容

右边侧栏

页脚部分

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

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

.loading{

background:#FF6100; //设置进度条的颜色

height:5px; //设置进度条的高度

position:fixed; //设定进度条跟随屏幕滚动

top:0; //将进度条固定在页面顶部

z-index:99999 //提高进度条的优先层级，避免被其他层遮挡

}

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

页头部分

$('.loading').animate({'width':'33%'},50); //第一个进度节点

左侧内容

$('.loading').animate({'width':'55%'},50); //第二个进度节点

右边侧栏

$('.loading').animate({'width':'80%'},50); //第三个进度节点

页脚部分

$('.loading').animate({'width':'100%'},50); //第四个进度节点

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

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

$(document).ready(function(){

$('.loading').fadeOut();

});

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

jquery ajax加载页面进度条,jquery网页加载进度条的实现相关推荐

基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码:代码如下: var stop=true; $(window).scroll(function(){ totalheight = parse ...
Jquery Ajax调用aspx页面方法
原文:Jquery Ajax调用aspx页面方法在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通 ...
php 页面异步刷新,php+jQuery+Ajax简单实现页面异步刷新
php+jQuery+Ajax简单实现页面异步刷新这里有新鲜出炉的 jQuery 示例,程序狗速度看过来! jQuery javascript 框架 jQuery 是一个兼容多浏览器的 javasc ...
mvc jquery ajax方法,asp.net mvc-如何在jQuery $ .ajax（）中将模型发送请求到MVC控制器方法...
asp.net mvc-如何在jQuery $ .ajax()中将模型发送请求到MVC控制器方法在使用以下代码进行自动刷新时,我假设执行发布后,模型将自动发送给控制器: $.ajax({ url: ...
Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
ajax调用ashx的方法,jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是&q ...
jquery.ajax上传个数限制,关于jquery ajax上传的坑
@(呵呵) 今天主要介绍processData: false, contentType: false, 这两个参数--processData 默认情况下,通过data选项传递进来的数据,如果是一个对象 ...
jquery ajax 超时处理不起作用,jQuery ajax超时处理
jQuery - ajax超时处理 [示例代码] script> $(document).ready( function(){ $.ajax({ url:"jQuery - ajax. ...
python爬虫动态加载页面_如何爬动态加载的页面？ajax爬虫你有必要掌握
通过前面几期Python爬虫的文章,不少童鞋已经可以随心所欲的爬取自己想要的数据,就算是一些页面很难分析,也可以用之前介绍的终极技能之「Selenium」+「Webdriver」解决相关问题,但无奈这 ...
php+JQuery+Ajax简单实现页面异步刷新（转）
页面显示如下: JQueryAjax.html中的代码如下(用的较为简单的$.post) [html] view plaincopy print? <html> <head> ...

jquery ajax加载页面进度条,jquery网页加载进度条的实现

jquery ajax加载页面进度条,jquery网页加载进度条的实现相关推荐

最新文章

热门文章