提示页面载入中的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可能造成的不良效果,很好很好!详细代码见《用图片动画实现的提示页面载入中》

10 Comments:

  1. 老大…
    感谢啊….
    正在试呢….

  2. 终于好了…
    :-)
    还有很多疑问的…
    再试几天…
    不行的话再mail了

  3. 想请问一下…
    就这篇文章..
    2007.01.14 3:20 pm in 建站手记&WordPress. 1554字 热度:150 ℃

    那个热度:150 ℃是什么?关注么?

  4. 你很聪明呀,呵呵!
    早先我在一些网站上看过类似的做法,我最近找到了一个显示浏览次数的插件,顺便就改成这中显示形式,我还准备使它能够根据数量的多少显示不同的颜色。

  5. 现在已经完完全全用了搂主提供的代码….收藏中..

  6. Pingback: 你好,上帝

  7. Pingback: DreamHost Web Hosting » 提示页面载入中的JS代码

  8. Pingback: 换用Google Analytics来做网站统计 | 泊客Myheimu

  9. 说实话,heymu.com我是今年偶然才知道的。今年用电脑用的比较多,经常上网翻翻,忘了从哪里进入的heymu.com了。想必您在自己博客上看到的溢美之词已经很多了,本人觉得确实很不错,有很多有用的东西您都分享出来了。我就不多说了。祝贵博越办越好。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据