给网站添加一个“正在加载ing……”的效果

在读 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 就隐掉了。

Leave a Reply