给页面加上Loading效果

By sqboa on 一月 8, 2009

首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：
<body>
  <div id='loading'>正在加载</div>
你可以直接放到页面的<body>标签后面，亦可以用script.write输出（如果你有SEO洁癖的话）

然后，在你的样式表中，对这个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就隐掉了。

个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。

本文来自：http://www.awflasher.com/blog/archives/1589