/* 336x280*/
页面加载效果，也就是通常所说的 Loading 效果，能提示访问者使其耐心等待页面加载的完成，有效防止流量损失。
如果服务器置于国外，国内访问可能比较慢，这时友好的页面加载提示就非常有用。当然，通过繁杂的 Ajax 等技术，可以很好的实现。但芒果生性笨拙，只会简单的 HTML+CSS 和仅有的几句 JavaScript，所以此方法没有多少技术含量。
假设需要在加载过程中，页面右上角显示红色的“正在加载中…”提示信息。原理很简单，HTML 代码的 <body></body> 部分解释前插入此提示信息，解释完成后隐藏它即可。
首先，在 <body> 标记后插入：
<div id="loading">页面加载中...</div>
你可以自由定义 loading 这个 id 的样式。芒果将其设置为红色背景，白色文字：
#loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:0px;right:0px;padding:2px 10px 2px 10px;}
最后，用 JavaScript 代码输出样式，在 </body> 标记前将其隐藏：
<script type="text/javascript">document.write('<style>#loading{display:none;}</style>');</script>
对于 WordPress 用户而言，使用过多插件会导致页面加载速度严重减缓。如果这样，不妨试试这个简单的方法。
/* 336x280*/
版权所有，转载请注明出处。
转载自 <a href="http://www.mangguo.org/simple-page-loading-effect/" title="简单的页面加载 (Loading) 效果" rel="bookmark">简单的页面加载 (Loading) 效果 | 芒果小站</a>
已经有 4 条群众意见
- 芒果 对 说
#1/2009-05-14 18:27你可以看看 Discuz 的 7.0 版本，收藏某个帖子时的页面加载效果。这个方法没什么技术含量，网速慢的情况下使用还是不错的。 回应
- 木鱼猫
#2/2009-05-14 08:08亲爱的芒果啊，能不能搞个演示地址？
没效果看起来很不动人的说。 回应
- 上弦
#3/2010-08-24 20:48我用的 WP3.0。可以加载成功，但是最后没有办法消失。 回应
- 优趣
#4/2010-11-28 01:18有效果就更好啦！ 回应
我简单说几句