给页面加上Loading效果最简单实用的办法

虽然现在的GMail已经看不到这个效果,但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress主题TES中:

其实我的方法非常简单,也可以说没什么技术含量,甚至还不支持IE6,但据我长期的观察,确实非常实用的。Analytics的统计数据表明,加入了这一效果之后,用户的“平均停留时间”的确有所提高。可见,一个“正在加载”让许多用户都有更多的耐心等待,而不会因为屏幕空白太久而不耐烦地离开。

最近,又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下:

首先,在页面的最上部输出一个Loading文字,比如“正在加载”,用div标签包含,并给它一个id,比如loading:

<body>
  
正在加载

你可以直接放到页面的<body>标签后面,亦可以用script.write输出(如果你有SEO洁癖的话)

然后,在你的样式表中,对这个loading设定一个简单的样式:

#loading{z-index:1;padding:5px 0 5px 9px;
background:#c44;left:0;top:0;width:90px;
color:#fff;position:fixed}

接下来,在你<body>标签闭合之前,将这个loading隐藏掉就可以了。最简单的方法是输出一段<style>标记:

  document.write('#loading{display:none}');
</body>

如果你有jQuery之类的JavaScript库,就更方便了,例如jQuery可以使用:

  $('#loading').hide()
</body>

这样,当页面完全加载完毕之后,loading就隐掉了。

对于WordPress博客,如果你对页面代码没有太苛刻的洁癖,我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端,你的“Loading”会飞快地出现,用户会觉得你的服务器响应非常迅速。然而,如果你从各种不同的域名下先加载几百kb的JavaScript库,估计用户在你的“Loading”出现之前就已经关闭页面了。

最后,希望这个老土的技巧能帮到你:)

Advertisements

86 thoughts on “给页面加上Loading效果最简单实用的办法

  1. prototype怎么弄?
    “我个人建议把一些重量的JavaScript库都放到这段loading之后引入”
    loading是在body里面的,js是在head里面引入的,怎么把js放到loading后面

    1. 删除head里面的js,放到body里面就可以了啊。
      大多数情况下,我们引入Analytics的代码不就是放在最后么:)

  2. “ 正在加载 ”能不能放在body之前?
    我的网站网速较慢,希望早一点加载进度提示。
    测试将代码放在body之前,firefox显示正常,但IE7会影响CSS布局(三栏全部跑到了最左栏),不知如何解决?

  3. 楼主您好,其实您这样些会使得在某些图片被加载完之前,loading提示就消失了。我觉得应该用body的onload事件。我也写了篇类似的文章http://wubin.name/blog/display_a_message_while_loading.html。谢谢

    1. 没错,可是图片的加载往往会比较耗时间,我个人觉得loading显示太久也不太好。另外,用我这个方法甚至可以完全避开JavaScript(只要你在最后硬塞一个style标签就可以了)

      总之,具体怎么用,仁者见仁,智者见智了:)

    1. 那种也行。不过对于非功能性页面,完全模仿GMail用一个进度条的loading,不合适。但也可以把进度条引入到loading中,我会考虑做一个:)

  4. 这个效果能不能用在进入网站一开始就能出现,就是不要等到加载到body后才有,

    在head里调用各种js也是要花点时间的

    1. 理论上,你可以一上来就输出一个div或者任何文字,但这显然会给你造成更多的麻烦,例如SEO、例如XHTML标准,更严重地,可能影响到浏览器的渲染和JavaScript的解释。

      body之前加载的js可以放到body之后,不一定非要在head里面完成。尤其是jQuery(yui)和一些它的plugin、Prototype这些巨大的框架。

  5. 对你现在的进度效果很感兴趣,但是把你现在用的代码用上还是没法出现进度的效果,如果能更新下这篇文章说下新的方法就更好了XD

  6. 加入了这个,可是显示不了进度条!跟你页面这种进度条效果,有区别,一直以为自己加错了!后来看到大家也说没进度效果。能否写一个完整的,赠送给大家,谢谢!

    1. 要想加入进度条可就不能一行代码解决了哦。其实原理是一样的,在页面的不同位置“设点”,依次递增地设置某一个div的width属性就可以了。

  7. 那能否在一个简单的页面,大家下载下来,研究一下呢?每次都来关注博主的很多好东西,这个既然大家都喜欢,为什么博客不在百忙之中,做一个在页面的不同位置“设点”,依次递增地设置某一个div的width。这种能实现进度条的效果的HTML送给大家学习?这不是很多喜爱博客期待的吗?

  8. 看到AW这里在顶部导航栏、侧边栏开始部分、侧边栏的收藏下面、ALEXA的上面以及底部的快速检索之前都有下面这样的代码XD

    $(“#awlpercent”).css(“width”,”XXpx”);

    不过我在自己的相对应的一些可能加载比较慢的DIV之前分别加入了这个代码,但FF下还是跟没加前一样….难道还少点啥?在去研究研究

    1. 我认为用下面这句也许更好些(毕竟已经在用Jquery):
      $(“#awlpercent”).animate({width:”XXpx”})
      动画看着够爽!

  9. 知道了原来自己没有JQUERY文件更没有调用它,加了下面这个后效果就出来了,当然也可以把文件下回去放自己空间里,我用的是GG的,改这么一个东西算是学习到了^_^

    我的博客就剩下在微调下设点的位置就可以了,其他的朋友不会的自己查看下AW的源代码和CSS文件就可以整明白了,而且你只要打开他的网页源代码查找我上面说的那句代码就没剩下什么难的了

  10. 明白了,在页面不同位置分别加上
    document.write(‘#awlpercent{width:XXpx}’);
    就行了,可以不调用jQuery库

    开始还以为是用字节数算出来的百分比……

  11. 似乎不太管用呢。我的页面有数据库交互,所以比较慢,放上之后页面处于呆滞状态若干秒后。小红条闪了一下,页面也跟着出来了。没有起到预先提示的作用。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s