0%

Zed童鞋向我询问本站载入效果的做法,由于比较繁琐,遂写到Blog中来,一来是这样比QQ等手段更有条理性,二来可以保留下来提高重用率。 废话不多说,现在开始: 1.结果 本效果完成后的效果就是你在打开本站每一个页面的时候会出现一个半透明遮罩一个loading画面然后页面载入完以后遮罩消失的效果。 2.思路 这个半透明遮罩首先被载入,这样他才能在一开始就出现,他上面有一张图片和一段文字告诉浏览者这是在loading,而不是笔记本快没电了或者什么;然后,页面的DOM就Ready了,这个时候为了验证各种库(比如我所使用的jQuery)载入完毕,CSS也下载完了,我们使用jQuery语句来使这个遮罩层隐藏起来,这个时候这个效果就完成了。 3.准备 你需要一个已经安装好的网站,和一个可以在你自己控制之下的文件系统。说简单点,拿Wordpress举例,你得能够修改自己的模板全部代码;你需要一个jQuery库、 一个载入用的图片、和一个好用的文本编辑器(当然你可以用记事本,不过我这里推荐Notepad++)。 4.动手 以下我们以修改一个Wordpress模板为例,其他所有类型网页修改方法都大同小异,只是文件的命名方式有少许不同而已。 找到header.php文件,用编辑器打开,如果你的模板本身没有使用jQuery库,那么请在标签内加入以下代码:

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

页面载入中..

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

background:#000 url(/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标签之下的关于遮罩的代码替换成如下代码即可:

页面载入中..

//<![CDATA[
function turnoff(obj){
document.getElementById(obj).style.display=”none”;
}
//]]>

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

2010年快要到了,今年是个很happy的一年,希望明年能继续,话就不多说了,挑点儿最近听的过去的几首歌映个景吧。

今天看完了存货《有关时间旅行的热门问题 (Frequently Asked Questions About Time Travel) 》 后,发现了豆瓣上的这个非常-- 的故事:   一九四五年的一天,克力富兰的孤儿院里出现了一个神秘的女婴,没有人知道她的父母是谁。她孤独地长大,没有任何人与她来往。         直到一九六三年的一天,她莫明其妙地爱上了一个流浪汉,情况才变得好起来。可是好景不长,不幸事件一个接一个的发生。首先,当她发现自己怀上了流浪汉的小孩时,流浪汉却突然失踪了。其次,她在医院生小孩时,医生发现她是双性人,也就是说她同时具有男女性器官。为了挽救她的生命,医院给她做了变性手术,她变成了他。最不幸的是,她刚刚生下的小女孩又被一个神秘的人给绑走了。这一连串的打击使他从此一蹶不振,最后流落到街头变成了一个无家可归的流浪汉。          直到一九七八年的一天,他醉熏熏地走进了一个小酒吧,把他一身不幸的遭遇告诉了一个比他年长的酒吧伙计。酒吧伙计很同情他,主动提出帮他找到那个使‘他’怀孕而又失踪的流浪汉。唯一的条件是他必须参加伙计他们的‘时间旅行特种部队’。          他们一起进了‘时间飞车’。飞车回到六三年时,伙计把流浪汉放了出去。流浪汉莫明其妙地爱上了一个孤儿院长大的姑娘,并使她怀了孕。伙计又乘‘时间飞车’前行九个多月,到医院抢走了刚刚出生的小女婴,并用‘时间飞车’把女婴带回到一九四五年,悄悄地把她放在克力富兰的一个孤儿院里。然后再把稀里糊涂的流浪汉向前带到了一九八五年,并且让他加入了他们的‘时间旅行特种部队’。          流浪汉有了正式工作以后,生活走上了正轨。并逐渐地在特种部队里混到了相当不错的地位。有一次,为了完成一个特殊任务,上级派他飞回一九七零年,化装成酒吧伙计去拉一个流浪汉加入他们的特种部队……

Work Offline 是一个可以快速切换浏览器脱机状态的扩展,其作用相当简单,就是在状态栏弄个按钮,点一下就切换浏览器脱机状态。 不过这个插件暂时只支持到Firefox 3.0.* ,所以我拿下来改了一下,现在 3.. 都可以用了,希望你喜欢.. 下载地址: 点我 至于说这个玩意儿能干什么,就是见仁见智了,比如这样.. Have fun !