Zed童鞋向我询问本站载入效果的做法，由于比较繁琐，遂写到Blog中来，一来是这样比QQ等手段更有条理性，二来可以保留下来提高重用率。
废话不多说，现在开始：
1.结果
本效果完成后的效果就是你在打开本站每一个页面的时候会出现一个半透明遮罩一个loading画面然后页面载入完以后遮罩消失的效果。
2.思路
这个半透明遮罩首先被载入，这样他才能在一开始就出现，他上面有一张图片和一段文字告诉浏览者这是在loading，而不是笔记本快没电了或者什么；然后，页面的DOM就Ready了，这个时候为了验证各种库(比如我所使用的jQuery)载入完毕，CSS也下载完了，我们使用jQuery语句来使这个遮罩层隐藏起来，这个时候这个效果就完成了。
3.准备
你需要一个已经安装好的网站，和一个可以在你自己控制之下的文件系统。说简单点，拿Wordpress举例，你得能够修改自己的模板全部代码；你需要一个jQuery库、 一个载入用的图片、和一个好用的文本编辑器(当然你可以用记事本，不过我这里推荐Notepad++)。
4.动手
以下我们以修改一个Wordpress模板为例，其他所有类型网页修改方法都大同小异，只是文件的命名方式有少许不同而已。
找到header.php文件，用编辑器打开，如果你的模板本身没有使用jQuery库，那么请在<head></head>标签内加入以下代码：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/loading.js"></script>
还是header.php文件，找到body标签，将其修改并在其下添加遮罩层，如下：
<body style="height:100%; width:100%; position:relative;"> <div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(http://interjc.googlecode.com/svn/trunk/waterfall/img/load.gif) no-repeat center center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;"> <p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:20px 0 0 -50px; padding:3px 10px;">页面载入中..</p> </div>
未达到最佳效果，请将上面代码中background里url括号内的图片下载至你的模板文件夹(比如img文件夹)内，并将此图片网址改为如下：
background:#000 url(<?php bloginfo('stylesheet_directory'); ?>/img/load.gif) no-repeat center center;
最后通过jQuery来控制整个遮罩(也就是页面载入效果)的行为：
在模板文件夹随便什么地方(这里我们使用其根目录)新建一个名为loading的js文件loading.js ，在其中添加如下代码：
//载入中 Loding.. jQuery(function(){ jQuery('#loading-one').empty().append('页面载入完毕.').parent().fadeOut('slow'); });
Update(2010.1.9)：
默默觉得需要一个点击就立刻取消遮罩的功能，可以照顾到网速慢的用户…
我觉得他说得很对，于是我就加上了，在此对默默童鞋表示感谢。如果你也需要这样的功能，可以这么做：
打开header.php文件，把刚才的那段添加在body标签之下的关于遮罩的代码替换成如下代码即可：
<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(http://interjc.googlecode.com/svn/trunk/waterfall/img/load.gif) no-repeat center center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;" onclick="javascript:turnoff('loading')"> <p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:20px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中..</p> </div> <script type="text/javascript"> //<![CDATA[ function turnoff(obj){ document.getElementById(obj).style.display="none"; } //]]> </script>
5.完工
这个时候把所有修改过的文件保存，然后上传，应该就成功了。需要注意的是，如果你使用的是UTF-8编码的话，所有的文件必须使用编辑器转换为UTF-8无BOM模式之后再保存，不然也许会出现各种诸如乱码之类的问题。更改格式的办法如左图(以notepadd++为例)。
有意见或者建议欢迎在楼下指出，have fun！
可以任意转载, 转载时请务必以超链接形式标明文章原始出处及此声明
本文地址：http://interjc.net/archives/2010/01/01/jquery-loding-effect.html
耍酷用····
img回复
好东西啊！谢谢interjc哥哥~
img回复
搞定啦哈哈哈哈！谢谢啊！
img回复
interjc 回复:
一月 1st, 2010 - 19:03
@Zeddicus, 呵呵，搞定就好～
img回复
Zeddicus 回复:
一月 1st, 2010 - 19:43
@interjc, 感激不尽哈哈~
img回复
深更半夜睡不着，来看看博主的文章，呵呵，有时间也记得会放下我司小站。www.99187.cn 刚做，博主不要笑话。
img回复
围观，学习，飘过
img回复
呵呵，有点意思。不过我总觉得这样的显示方式更注重的是花哨而不是实用。
img回复
interjc 回复:
一月 8th, 2010 - 16:14
@默默, 这种方式的实用处在于，不会再页面最基本的东西还没有载入完毕的时候，页面就会被点击，有些js的运行会妨碍后面的js的载入。
而且这个载入效果完毕以后，至少代表我的jQuery库和CSS载入完毕了..
另：我有时候用这个来debug..如果js写的不对，遮罩就总不会消失..
img回复
@interjc, 的确，你这样是保证了页面没有载入完毕的时候页面不被点击，但是对于网速比较慢的用户来说，可能我需要的不是你的页面全部载入完毕，我只需要我想看的东西载入完毕就行了，这部分主要是文字。比如你的首页，我一打开，看到这篇文章，我有兴趣，想点击标题继续阅读，但是这个时候css和其他东西还没有载入完毕，遮罩就会阻碍我点击我想要的链接，这个时候我就必须一直等待，知道你的页面完全加载完毕。这样的情况下，无疑浪费了访客的时间，让对方下载了自己不需要的数据。
img回复
interjc 回复:
一月 9th, 2010 - 18:18
@默默, 你说的不错，我现在就加上点击立刻取消遮罩的功能～
多谢建议～
img回复
学习了,不过我的站点速度有点慢.不太适合用这个.
img回复
interjc 回复:
一月 14th, 2010 - 14:12
@安逸哇, 呵呵，这个就是用来让浏览者等待时不觉得时间太长的啊～
img回复
怎么用在asp.net（c#）页面中呢？？
img回复
interjc 回复:
二月 4th, 2010 - 20:16
@11, 一样的，这里都是html+js，什么语言都一样，只是放的文件位置不同而已..
img回复
非常感谢！
请教一下。
<body >
是改正这样吗?
<body style="height:100%; width:100%; position:relative;" >
img回复
interjc 回复:
三月 1st, 2010 - 23:08
@lp452, 是这样，没错
img回复
用了这个效果，在搜索结果下方做了鸣谢链接。
谢谢:)
img回复
interjc 回复:
四月 30th, 2010 - 08:18
@郑美园, 客气，感谢捧场
img回复
为什么我在博客上测试 “页面载入”几个字消失之前要变乱码一下~~~ = =
img回复
哦 不对 现在情况是没有乱码 但是一直在载入· ······
img回复
“如果你使用的是UTF-8编码的话，所有的文件必须使用编辑器转换为UTF-8无BOM模式之后再保存，不然也许会出现各种诸如乱码之类的问题”
“另：我有时候用这个来debug..如果js写的不对，遮罩就总不会消失..”
我就复制的文章里提供的代码···
img回复
interjc 回复:
五月 3rd, 2010 - 22:58
@Jest, 我猜想是文件编码的问题
img回复
已经按UTF-8无BOM模式保存了啊
在IE里打开 会提示loading.js 有错 缺少对象 – -
img回复
interjc 回复:
五月 4th, 2010 - 20:30
@Jest, 原因有好多，看了看你的博客貌似已经去除了相应代码，所以看不出来问题原因。
如果你使用的是shadowblue的话，只需要加入
而无需载入库文件
shadowblue的下一个版本会考虑加入这个功能，自己不想弄的话敬请等待，呵呵。
img回复
Jest 回复:
五月 4th, 2010 - 21:10
@interjc,
嗯 用的shadowblue 之前修改的时候打开header.php 看到已经载入”jQuery.js”了 也就仅仅只加了载入loading.js的代码 我再自己捣鼓一下
img回复
用上了，但是用上了发现和willin的ajax回复评论有点冲突，那个提交loading按钮一直显示出来，又无奈去掉了。
img回复
interjc 回复:
六月 4th, 2010 - 21:44
@king2z, 下次修改下代码，弄个更能适应恶劣代码环境的出来
img回复
好文章，好好学学下……
img回复
打开每一页都有着效果？岂不是每一页都要这样做？
img回复
interjc 回复:
六月 28th, 2010 - 19:21
@凡小爱, 动态网页只用添加一处就行了
img回复
使用后发现网站展示图片另外一组无法拉动，求解。
就是网站第一块使用后无法拉动
img回复
interjc 回复:
八月 9th, 2010 - 19:19
@Richard, 实在看不懂你的意思
img回复
请问下这个和Ajax-comment的冲突怎么解决呢
loading的按钮会一直出现恶
img回复
方丈 回复:
八月 17th, 2010 - 11:19
@snowxh, 嘿嘿嘿……被我发现了哇……
img回复
snowxh 回复:
八月 17th, 2010 - 11:20
@方丈, 我贴了传送门的好不好~
img回复
方丈 回复:
八月 17th, 2010 - 11:35
@snowxh, 完了……没有看见……类目……
img回复
interjc 回复:
八月 17th, 2010 - 22:02
@snowxh, 最简单直接的办法是在<body>加上 onload=”javascript:document.getElementById(‘loading’).style.display=’none’;” 既：
这种问题我也不知道是那里引起的，我这也装了不少插件啊，也没这个问题
img回复
snowxh 回复:
八月 17th, 2010 - 22:10
@interjc, 已经解决了~是跟一个 id重名了 囧
img回复
必须得收藏！超级实用，嘿嘿 ~~
img回复
看着不错，试一下去，谢了！
img回复
测试下回复会不会一直loading…
img回复
很喜欢这个效果，用了，谢过。
img回复
这个效果，学习了。。。
img回复
太厉害了！！！！果然很华丽
img回复