关于本Blog的页面载入效果

Zed童鞋向我询问本站载入效果的做法,由于比较繁琐,遂写到Blog中来,一来是这样比QQ等手段更有条理性,二来可以保留下来提高重用率。

废话不多说,现在开始:

1.结果
本效果完成后的效果就是你在打开本站每一个页面的时候会出现一个半透明遮罩一个loading画面然后页面载入完以后遮罩消失的效果。

2.思路
这个半透明遮罩首先被载入,这样他才能在一开始就出现,他上面有一张图片和一段文字告诉浏览者这是在loading,而不是笔记本快没电了或者什么;然后,页面的DOM就Ready了,这个时候为了验证各种库(比如我所使用的jQuery)载入完毕,CSS也下载完了,我们使用jQuery语句来使这个遮罩层隐藏起来,这个时候这个效果就完成了。

3.准备
你需要一个已经安装好的网站,和一个可以在你自己控制之下的文件系统。说简单点,拿Wordpress举例,你得能够修改自己的模板全部代码;你需要一个jQuery库、 一个载入用的图片、和一个好用的文本编辑器(当然你可以用记事本,不过我这里推荐Notepad++)。

4.动手
以下我们以修改一个Wordpress模板为例,其他所有类型网页修改方法都大同小异,只是文件的命名方式有少许不同而已。

找到header.php文件,用编辑器打开,如果你的模板本身没有使用jQuery库,那么请在<head></head>标签内加入以下代码:

还是header.php文件,找到body标签,将其修改并在其下添加遮罩层,如下:

未达到最佳效果,请将上面代码中background里url括号内的图片下载至你的模板文件夹(比如img文件夹)内,并将此图片网址改为如下:

最后通过jQuery来控制整个遮罩(也就是页面载入效果)的行为:
在模板文件夹随便什么地方(这里我们使用其根目录)新建一个名为loading的js文件loading.js ,在其中添加如下代码:

Update(2010.1.9):

默默觉得需要一个点击就立刻取消遮罩的功能,可以照顾到网速慢的用户…

我觉得他说得很对,于是我就加上了,在此对默默童鞋表示感谢。如果你也需要这样的功能,可以这么做:
打开header.php文件,把刚才的那段添加在body标签之下的关于遮罩的代码替换成如下代码即可:


5.完工
这个时候把所有修改过的文件保存,然后上传,应该就成功了。需要注意的是,如果你使用的是UTF-8编码的话,所有的文件必须使用编辑器转换为UTF-8无BOM模式之后再保存,不然也许会出现各种诸如乱码之类的问题。更改格式的办法如左图(以notepadd++为例)。

有意见或者建议欢迎在楼下指出,have fun!

老鬼 2014-04-14 13:56:13
| |

非常厉害。。不过IE8下有点问题。就是页面一直在加载。。不会隐藏!

网站实现“页面载入中…”效果 – 小傻瓜 2013-12-24 20:38:35
| |

[…]       方法来自糖醋排骨,点击查看。具体步骤如下: […]

青衿 2012-12-09 18:22:29
| |

不知道可不可以把加载的GIF换成SWF文件,这样就更有意思了。

网站实现“页面载入中…”效果 – xshagua 2012-10-06 13:15:02
| |

[...]       方法来自糖醋排骨,点击查看。具体步骤如下: [...]

雨丸 2011-06-02 12:54:06
| |

太厉害了!!!!果然很华丽

张衡 2011-04-13 11:15:33
| |

这个效果,学习了。。。

leaves 2011-03-18 22:19:00
| |

很喜欢这个效果,用了,谢过。

Weitian Zhao 2010-11-01 09:30:59
| |

测试下回复会不会一直loading...

Dawnson 2010-10-15 23:13:14
| |

看着不错,试一下去,谢了!

Fanr 2010-09-09 15:04:44
| |

必须得收藏!超级实用,嘿嘿 ~~

关于本Blog的页面载入效果 - 堕落∮木头's BLOG 2010-09-07 09:59:04
| |

[...] 默默觉得需要一个点击就立刻取消遮罩的功能,可以照顾到网速慢的用户… [...]

snowxh 2010-08-11 18:00:21
| |

请问下这个和Ajax-comment的冲突怎么解决呢 loading的按钮会一直出现恶

Richard 2010-08-09 17:42:48
| |

使用后发现网站展示图片另外一组无法拉动,求解。 就是网站第一块使用后无法拉动

开源博客 · Blog的页面载入效果 2010-08-09 12:07:55
| |

[...] 默默觉得需要一个点击就立刻取消遮罩的功能,可以照顾到网速慢的用户… [...]

凡小爱 2010-06-27 16:33:15
| |

打开每一页都有着效果?岂不是每一页都要这样做?