提示页面载入中的JS代码

在一些网站上会有“网页载入中…”的提示，特别是用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>部分尽量靠前的部分。

然后在< body>里变成（是两个尖括号里面）

2007年12月16日 其实使用过程中我仍然发现运行起来偶尔会出现问题，移动的颜色块会只在那里抖动，这可能是页面下载后javascript产生的一些异动。又看到一些网站开始用gif动画来实现这种效果了，摒除了javascript可能造成的不良效果，很好很好！详细代码见《用图片动画实现的提示页面载入中》