| 学校主页

技术支持

TRS专题

当前位置: 首页 -> 技术支持 -> TRS专题 -> 正文

给页面加上Loading效果/图片/文字

信息来源: 发布日期:2010-01-22

看到网站加载的时候慢,耐心等待?请加入loading 效果,这样来访者会有兴趣等待下去!

下面分析了2种样式供您选择!请选择自己喜欢的一种放在你的网站上吧!

样式1: 采用图片加文字样式 居中显示

样式2:采用文字加背景方式 左上角显示

其实方法非常简单,也可以说没什么技术含量。Analytics的统计数据表明,加入了这一效果之后,用户的“平均停留时间”的确有所提高。可见,一个“正在加载”让许多用户都有更多的耐心等待,而不会因为屏幕空白太久而不耐烦地离开。

首先,在页面的最上部输出一个Loading文字,比如“正在加载”,用div标签包含,并给它一个id,

比如loading:

正在加载

你可以直接放到页面的标签后面,也可以用script.write输出

然后,在你的样式表中,对这个loading设定一个简单的样式:

#loading{z-index:1;padding:5px 0 5px 9px;

background:#c44;left:0;top:0;width:90px;

color:#fff;position:fixed}

接下来,在页面加载完之后,将这个loading隐藏掉就可以了。最简单的方法是输出一段标记:

这样,当页面完全加载完毕之后,loading就隐掉了。建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端,你的“Loading”会飞快地出现,用户会觉得你的服务器响应非常迅速。然而,如果你从各种不同的域名下先加载几百kb的JavaScript库,估计用户在你的“Loading”出现之前就已经关闭页面了。

下面讲解下pj-blog实现的方法:

1.首先准备一张图片,上传至images/。

2.修改default.asp 找到

在其上方添加

正在加载

找到

在下方添加一行

3.修改layout.css在最下方添加一段程序代码

#loading {height:100px;background:url(../images/loading.gif) no-repeat center center;position:fixed}