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

在读 aw 的文章时,找到了一个很好的实现页面加载效果的方法,这样的效果应该会给增加些好的体验吧!

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

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

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

  1. CHINA Internet Explorer Windows says:

    这个方法 需要不需读出数据库

    [Reply]

    久酷 CHINA Google Chrome Windows Reply:

    @快, 完全不需要

    [Reply]

Leave a Reply

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:


正在读取数据……