给页面加上Loading效果最简单实用的办法
作者：awflasher 来源：Awflasher.com 发布时间：2008-11-20 11:58:00
虽然现在的GMail已经看不到这个效果，但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress主题TES中：
其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。
最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：
首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：
<body> <div id='loading'>正在加载</div>
你可以直接放到页面的<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>标记：
<script>document.write('<style>#loading{display:none}<\/style>');</script> </body>
如果你有jQuery之类的JavaScript库，就更方便了，例如jQuery可以使用：
<script>$('#loading').hide()</script></body>
这样，当页面完全加载完毕之后，loading就隐掉了。
对于WordPress博客，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。
最后，希望这个老土的技巧能帮到你：）
0
投稿猜你喜欢
最近设计一个优惠券列表，有个属性是有效日期，因为空间有限，必须要把开始日期和结束日期在一行显示，这样就出现一排的数字，日期有好几种我们习惯的- 描述 嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能。本文作者想同你一起探讨如何使用AJAX技术来解
- CSS写法：overflow-y:visible本代码适用平台：IE6，IE7演示：<textarea style="wid
- 人类学是关于人的研究；社会人类学（social anthropology）是研究人类社会的学科。社会人类学还可以理解成“文化翻译”（the
- 原文：http://www.htmldog.com/guides/htmlintermediate/badtags/十六 有害的标签 Bad
- ASP开发中有用的函数（function）集合，挺有用的，请大家保留！'******************************
- 如何用METADATA替换ADOVBS.INC？ 在ASP中，使用组件时，如ADO，得先包含
- 初学者可以看看。在的img标签有两个属性分别为alt和title，对于很多初学者而言对这两个属性的正确使用都还抱有迷惑，当然这其中一部分原因
- 在记忆里，关于时间方面常的SQL也就下面这两个了，大多数朋友问题中所涉及到的数据库都ACCESS的，在些，也就写出这两SQL了。年代久远，目
- original article by sp(’Sergio Pereira’) Sergio Pereiralast update: Ma
- 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6，7和8共存。截至本文，Internet Explorer各个
- 为了防止再次被攻击，做个验证码过滤程序是必要的。我在网上找了一些资料，觉得用别人做好的代码总是很不爽，自己做麻又不会写复杂的代码，特别是生成
- 介绍我们一起来做个示例，在.NET中新建一个类，并在这个类里新建一个方法，然后在SQL Server中调用这个方法。按照微软所述，通过宿主
- 记得上次电梯按钮讨论中有朋友提到日本的无序电梯，我没有太明白意思。除了各位大师提出的无厘头方案，也有不少超前的创意，好多都值得继续思考和探索
- 1. 相对与比较老的环境，建议使用第二个 set dbconnection=Server.CREATEOBJECT("ADODB.
- position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览
- 代码如下:using System; using System.Data; using System.Configuration; usin
- int connectDb() { EXEC SQL BEGIN DECLARE SECTION; char username[20]; c
- 在建立与服务器的连接时出错。在连接到 SQL Server 2005 时，在默认的设置下 SQL Server 不允许进行远程连接可能会导致
- 图形由json格式加载，可以灵活配置。下一步是完善用户的操作，做这个感觉还是蛮有意思的。呵呵。截图：部分源码：<script type
