jQuery 页面载入进度条 (必有一款合适
发布时间： 2012-11-26 11:48:50 作者： rapoo
jQuery 页面载入进度条 (必有一款适合你----综合搜集版)
?
上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。
?
?
如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery内建的动画效果，其完全可以与浏览器自带的状态条媲美。
先来看一个演示：地址。
?
要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：
?
第三种 导向型
?
?
??第四种 iframe loading
解释：
0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
第五种 加载图片
?minimylazyload.js 在附件中找
第六种 本页?<style>#loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:500px;left:500px; z-index:1002; padding:2px 10px 2px 10px}</style><body><div id="loading">页面加载中…</div> .......... <script type="text/javascript">document.write('<style>#loading{display:none;}</style>');</script></body></html> 1 楼 javatim 2010-06-20 很棒，要用到。很全……兄台！ 2 楼 天梯梦 2010-06-21 能用到就好，哈哈~~
