首页 > 网页教程 > JavaScript > 打造完美的jQuery网页进度条(LOADING)

打造完美的jQuery网页进度条(LOADING)

时间:2011-05-08    来源:LOO2K

给自己的博客加上一个 LOADING… 进度条,这是一个很老很老的话题,两年前就已经有人用各种方法去实现它了。结合之前的前辈写的代码,我重写了一次。

最初我在 AW 的博客上看到的给页面加上Loading效果最简单实用的办法,他介绍的是使用纯的 CSS 跟 JavaScript 实现的效果。

原理是:在页面中写一个 LOADING… 的提示,利用 JavaScript 在 HTML 加载完时给 LOADING… 这个 DIV 设置隐藏。

后来在大牛 iShawn 的博客上看到jQuery 页面载入进度条,用了 jQuery 确实漂亮很多。

原理是:在页面的不同位置放置多个 JavaScript 代码,每个 JavaScript 代码逐步增加 LOADING… 的宽度,到最后加载完隐藏。

AW 跟 iShawn 都介绍了 LOADING… 的原理,明白了之后自己动手改造一下吧。我发现 iShawn 的博客的进度条不仅是在载入的时候能出现,而且在点击外部链接以及网页能的 JavaScript 事件的时候都能出现(具体的效果可见 iShawn 的博客或者我现在的博客)

为什么要网页进度条

如果你只想实现效果,这个小层次可以忽略过去。

Analytics的统计数据表明,加入了这一效果之后,用户的“平均停留时间”的确有所提高。可见,一个“正在加载”让许多用户都有更多的耐心等待,而不会因为屏幕空白太久而不耐烦地离开。

via AW

还有一段时来自刘未鹏的:

进度条的设计是一个很多人都知道的故事:同样的耗时,如果不给任何进度提示,只是在完成之后才弹出一个完成消息,中间没有任何动态变化,那么整个过 程就会让人等得非常焦急,导致一些人干脆把程序关了了事。如果有进度不断更新,那么对整个过程耗时的心理感受就会远低于实际值,用户也不会郁闷到把程序关 了。(你有多少次在银行处理手续的时候,看着工作人员把一堆材料不停地倒腾来去,心里多希望他们可以在柜台小窗口上投影一个进度条?)

这里的原因在于,没有进度提示的话,我们无法判断这个等待什么时候才是个尽头。如果有不断增长的进度条,那么我们对于什么时候会达到100%就会有 一个粗略的估计,这个估计是一剂定心丸,让我们知道这事情总会并且会在不久的将来完成。

via Mind Hacks

网页进度条可以增加网站的用户体验,不过用户体验不是增加一个网页进度条。

网页进度条实现原理

原理一:在页面中放一个用固定定位的 LOADING… 的提示,这个提示可以是图片、文字或者一段加载的动画,利用浏览器是先加载完成 HTML 文档之后加载 CSS 最后加载 JavaScript 的原理,在加载到最后用 JavaScript 把 LOADING… 所在的 DIV 设置隐藏即可。

预览效果

原理二:根据网页加载时按照 HTML 文档中 JavaScript 的先后顺序执行,给进度条显示百分比数字,但这个效果并不完美和准确。

预览效果

原理三:利用 JavaScript 实现,凡页面能的 JavaScript 被触发也显示 LOADING… ,待事件完成之后隐藏。

预览效果

相关推荐
超炫基于HTML5+jQuery的进度条插件 percentageloader推荐
分享20个很不错的js日历插件、按钮、复选框等扩展组件
10个漂亮的CSS3+jQuery的Loading加载条动画设计插件
新手教程:10个jQuery特效讲解
分享10款精美的焦点幻灯和图片特效jQuery插件
lazyload:基于jQuery框架实现图片异步加载
7款基于JQuery的滑动门选项卡(Tabs)效果演示(附下载)
8个超级炫酷的jQuery倒计时插件和教程分享
10款效果不错实现各种功能的jQuery动态插件
10个超级棒让你惊喜的jQuery插件推荐
10款网页特效效果超酷的jQuery插件推荐
14款效果新颖基于jQuery的实时搜索插件分享
jQuery+CSS3教程:创建一个超酷的全屏幻灯特效
30款超棒的jQuery特效插件推荐
基于jquery的跟随屏幕滚动特效代码
用jQuery实现左右DIV自适应高度相同代码分享
最新热门的jQuery特效插件分享 web开发必备
30款超实用jQuery插件合集分享
16款超炫的jQuery图像滑块插件免费下载
20款jQuery脚本文件上传插件推荐
25款最新的Javascript和jQuery插件下载
15款超级酷的jQuery表单验证、选项卡、轮播图等插件下载

精彩推荐

热门教程