芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
4

简单的页面加载 (Loading) 效果

作者 芒果/分类 代码/发布于 2009-05-12 22:37

页面加载效果,也就是通常所说的 Loading 效果,能提示访问者使其耐心等待页面加载的完成,有效防止流量损失。

如果服务器置于国外,国内访问可能比较慢,这时友好的页面加载提示就非常有用。当然,通过繁杂的 Ajax 等技术,可以很好的实现。但芒果生性笨拙,只会简单的 HTML+CSS 和仅有的几句 JavaScript,所以此方法没有多少技术含量。

假设需要在加载过程中,页面右上角显示红色的“正在加载中…”提示信息。原理很简单,HTML 代码的 <body></body> 部分解释前插入此提示信息,解释完成后隐藏它即可。

首先,在 <body> 标记后插入:

<div id="loading">页面加载中...</div>

你可以自由定义 loading 这个 id 的样式。芒果将其设置为红色背景,白色文字:

#loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:0px;right:0px;padding:2px 10px 2px 10px;}

最后,用 JavaScript 代码输出样式,在 </body> 标记前将其隐藏:

<script type="text/javascript">document.write('<style>#loading{display:none;}</style>');</script>

对于 WordPress 用户而言,使用过多插件会导致页面加载速度严重减缓。如果这样,不妨试试这个简单的方法。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/simple-page-loading-effect/" title="简单的页面加载 (Loading) 效果" rel="bookmark">简单的页面加载 (Loading) 效果 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 4 条群众意见

  1. 芒果木鱼猫/2009-05-14 18:27

    你可以看看 Discuz 的 7.0 版本,收藏某个帖子时的页面加载效果。这个方法没什么技术含量,网速慢的情况下使用还是不错的。 回应

    #1
  2. 木鱼猫 /2009-05-14 08:08

    亲爱的芒果啊,能不能搞个演示地址?

    没效果看起来很不动人的说。 回应

    #2
  3. 上弦 /2010-08-24 20:48

    我用的 WP3.0。可以加载成功,但是最后没有办法消失。 回应

    #3
  4. 优趣 /2010-11-28 01:18

    有效果就更好啦! 回应

    #4

下面我简单说几句