给页面加上Loading效果最简单实用的办法
作者：awflasher 来源：Awflasher.com 时间：2008-11-20 11:58:00
虽然现在的GMail已经看不到这个效果，但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress主题TES中：
其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。
最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：
首先，在页面的最上部输出一个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就隐掉了。
对于WordPress博客，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。
最后，希望这个老土的技巧能帮到你：）
0
投稿猜你喜欢
node+koa实现数据mock接口的方法
关于使用python对mongo多线程更新数据
SQLServer2008提示评估期已过解决方案
Python中可以用三种方法判断文件是否存在
Django中更新多个对象数据与删除对象的方法
python基础教程之基本数据类型和变量声明介绍
Python 调用C++封装的进一步探索交流
python numpy实现多次循环读取文件 等间隔过滤数据示例
解决redis与Python交互取出来的是bytes类型的问题
vue3如何实现挂载并使用axios
JavaScript 禁止用户保存图片的实现代码
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
解构用户研究
python编程使用PyQt创建UE蓝图
Python中文竖排显示的方法
利用js获取下拉框中所选的值
利用Python Matlab绘制曲线图的简单实例
PyQt5实现暗黑风格的计时器
pyqt5 QScrollArea设置在自定义侧(任何位置)
