Nov20
0
Share

给页面加上 Loading (正在加载)效果

还记得三两饭在浅谈博客速度与访客流量中提到过的网站加载速度慢会导致流量损失么?当时三两饭提到可以模仿 Gmail 提供一个加载进度条,但由于我是一个代码白痴,所以没有给出具体的代码解决方案。今天在读 aw 的文章时,找到了一个很好的方法:

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

<body>
<div id='loading'>正在加载</div>

你可以直接放到页面的 <body> 标签后面,亦可以用 script.write 输出。

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

#loading
{z-index:1;padding:5px 0 5px 9px;background:#c44;left:0;
top:0;width:90px;color:#fff;position:fixed}

接下来,在你 <body> 标签闭合之前,将这个 loading 隐藏掉就可以了。最简单的方法是输出一段 <style> 标记:

<script>document.write
('<style>#loading{display:none}<\/style>');
</script>
</body>

如果你有 jQuery 之类的 JavaScript 库,就更方便了,例如 jQuery 可以使用:

<script>$('#loading').hide()</script></body>

这样,当页面完全加载完毕之后 loading 就隐掉了。

添加这样一个简单的加载信息,不但能够挽留一部分访客,同时还能提高访客的 PV 值,何乐而不为呢?良好的网站细节设计是很重要的。

Filed under: | Tagged: , ,

Leave a Reply