在一些网站上会有“网页载入中…”的提示,特别是用javascript实现动画效果,感觉比较好,因为这样一来给人一个“等待”的温馨提示,比枯燥的等待在心理上要好得多。

自从[name]泊客Myheimu,http://heymu.com[/name]转移到DreamHost之后,虽然各方面都挺好,但是速度一直不尽如人意。运行速度还可以,传输速度不是太高,在加上网页(特别是主页)的图片、JS代码比较多,在IE下的显示就有很大的迟钝,因为IE中每一模块基本上

是统一显示,需全部下载后才可显示。

这种效果的实现方式很多,而我最后选择的是这样的一种方式:

后记:早就想写这篇文章了,可是懒得不愿写,一直存为草稿。最近中国台湾附近的地震造成国际互联网光缆损坏,速度更慢了。而[name]www.higod.cn,http://www.higod.cn[/name]的站长Email我说这种效果怎么做,那么我得将这篇文章写出来了。

我也是在网上找到的代码,但是代码是通过先设置< style type="text/css">和js代码,然后在< body>里添加很多东西实现的。我简化了步骤,让css代码和js代码都在页面head部尽量靠前的位置直接执行。

PS(2007.11.24):我发现这代码很不好用,有很多问题,所以后来自己也不愿意用了,最近拿出来考察一番,发现有一些地方需要改动,改动之后才能更好得显示。具体改动如下:

第一:我使用的时候总是会使后面的内容直接覆盖了这个“载入中”的框,我才发现原来的代码中,居然将z-index的设置放在了loading之中,而最外层的loading_container却没有设置z-index,这造成整个框体的z-index知识auto。并且我觉得这个框体应当在所有内容之前,所以增加了z-index值,并加到loading_container的属性中。

第二:在firefox下总是无法实现载入的滑动效果,查了“错误控制台”,发现一堆的“分析属性’width’值时出错。声明被丢弃。”,想到原因是XHTML标准中,width、height、top、left这些属性赋值的时候必须加上单位。

第三:这个载入框的宽度很难调整。loading_container和loading的宽度都是单独设置的,而且js代码也只是针对原本的宽度。我这里使用js代码自动来设置宽度,对loading的宽度用百分比来实现,对载入中的滑动条的变换也适用宽度变量自动调整。

以下是我多次修改之后的代码,我使用的是浅蓝色色系的颜色,请把它加入到< head>< /head>部分尽量靠前的部分。