给页面加上Loading效果最简单实用的办法
其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。
最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：
首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：
&div id='loading'&正在加载&/div&
你可以直接放到页面的&body&标签后面，亦可以用script.write输出（如果你有SEO洁癖的话）
然后，在你的样式表中，对这个loading设定一个简单的样式：
#loading{z-index:1;padding:5px 0 5px 9
background:#c44;left:0;top:0;width:90
color:#position:fixed}
接下来，在你&body&标签闭合之前，将这个loading隐藏掉就可以了。最简单的方法是输出一段&style&标记：
&script&document.write('&style&#loading{display:none}&\/style&');&/script&
如果你有之类的JavaScript库，就更方便了，例如jQuery可以使用：
&script&$('#loading').hide()&/script&&/body&
这样，当页面完全加载完毕之后，loading就隐掉了。
对于，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。
最后，希望这个老土的技巧能帮到你：）
本文来自：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。问说网手机版
躺着 站着 跪着轻松访问
问说网 / 蜀ICP备号
感谢您对问说网的支持，提出您在使用过程中遇到的问题或宝贵建议，您的反馈对我们产品的完善有很大帮助。
您的反馈我们已收到！
感谢您提供的宝贵意见，我们会在1-2个工作日，通过您留下的联系方式将处理结果反馈给您！多种方法实现Loading（加载）动画效果 - 推酷
多种方法实现Loading（加载）动画效果
当我们ajax提交一个按钮的时候，给那个按钮来个Loading效果会高端很多，体验也会上升个层次。
既能让用户知道
正在提交中
防止二次提交
，好处多多呢。
上面的这个圈圈是会滚动的。简单点的话，可以直接用GIF动态图片实现。不过现在已经有了CSS3和HTML5了，多了好几种高大上的实现方式。
这里先来介绍几个动画的在线demo，第一个是
，第二个是
下面一一列出，如果要结合按钮的话，可自行修改下CSS或JS等文件。当要嵌入到实际项目中的时候，可能会改动一些地方，以实际情况为准了。
一、PNG图片+CSS3动画
&div class=&pull-up pull-up-loading&&
&span class=&pull-icon&&&/span&正在载入中....
.pull-up-loading .pull-icon {
background-position: 0 100%;
/*chrome*/
-webkit-transform: rotate(0deg) translateZ(0);
-webkit-transition-duration: 0ms;
-webkit-animation-name: loading;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/*chrome*/
@-webkit-keyframes loading {
-webkit-transform: rotate(0deg) translateZ(0);
-webkit-transform: rotate(360deg) translateZ(0);
只有当加上
pull-up-loading
，才会出现滚动
添加一个动画keyframes，叫loading，是在做transform: rotate操作，下面的CSS省略了firefox中的动画代码，为了看的清晰点，实例中有完整的firefox代码
这里有个在线生成Loading的纯CSS代码，
。样式选择还是挺多的，就是对于老一点的浏览器的兼容性方面不是很强比如IE6、IE7、IE8等。
再来几个不同的款式：点击可查看源码
二、spin.js
这是一个脚本文件。不依赖任何库，可以独立执行，挺好用的，我在实际项目中使用过这个插件，当时我把所有的ajax提交都调用了这个插件，结合jQuery库，做到Loading效果和防止二次提交。而且这个库的浏览器兼容性很好，甚至兼容古老的IE6，而且不用引入额外的CSS或图，可配置的参数也很多。
我粗略的看过代码，标准的浏览器就用脚本写CSS3来做动画，对于古老点的浏览器就用setTimeout来模拟动画。里面还会初始化一个VML标签，这个是针对IE的。
看代码的时候看到了个很有趣的符号“~~”，后面一查，说是将变量转换成数字的一个方法，挺高级的。
这个插件还提供了一个在线配置的小网站，
showAjaxLoading: function(btn) {
if (btn == null || btn == undefined || $(btn).length == 0) return;
var left = $(btn).offset().
var top = $(btn).offset().
var width = $(btn).outerWidth();
var height = $(btn).height();
var opts = {
lines: 9, // The number of lines to draw
length: 0, // The length of each line
width: 10, // The line thickness
radius: 15, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 81, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to )
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
$('#ajax_spin').remove();
$('body').append('&div id=&ajax_spin& style=&position:background:#FFF;filter:alpha(opacity=30);opacity:0.3&&&div id=&ajax_spin_inner& style=&position:height:50&&&/div&&/div&');
$('#ajax_spin').css({
'top': top,
'left': left,
'width': width,
'height': height
var target = document.getElementById('ajax_spin_inner');
var spinner = new Spinner(opts).spin(target);
stopAjaxLoading: function() {
$('#ajax_spin').remove();
//new Spinner(opts).spin(target)
//spinner.stop();
上面那段代码是我在一个实际项目中写的，就是显示和移除Loading效果，并且在按钮上面覆盖这层效果防止二次提交。
btn就是按钮jQuery对象
left，top找到按钮的左右位移，width和height获取按钮的宽和高，width用的是
outerWidth
$('body')加入一个能够覆盖按钮的层
初始化一个Spinner对象，并加入到那个覆盖层中
可以单独使用，或者结合上面的插件spin一起结合使用。demo页面的效果挺高大上的，但用到实例可能还是需要些修改的。
下图随便选了几个例子，可以实现不同尺寸的按钮大小，不同方向的滚动，将按钮变成原型，或带进度条的按钮。挺多样性的。
HTML代码如下：
&button class=&ladda-button& data-style=&expand-right&&&span class=&ladda-label&&Submit&/span&&/button&
// Automatically trigger the loading animation on click
Ladda.bind( 'input[type=submit]' );
// Same as the above but automatically stops after two seconds
Ladda.bind( 'input[type=submit]', { timeout: 2000 } );
结构看上去不是很复杂，JS脚本的引入也不是很难。不过在引入实际项目中肯定还是需要做些修改的。
相比spin插件，这插件要引入的文件就多了，不但要引入JS还要引入CSS。
我本来想在
页面中，把demo页面重现一次，在把github里面的dist/CSS/ladda.min.css文件复制到codepen中，JS中的ladda.js和spin.js也复制过来。发生了点意外，那个滚动条老是会往下面一点。CSS都是全部复制的，很奇怪。后面发现是CSS的问题，真的是实际应用一下才会看到具体情况。
demo页面的CSS：
.ladda-button .ladda-spinner {
position: absolute;
z-index: 2;
display: inline-block;
width: 32px;
height: 32px;
margin-top: -17px;
opacity: 0;
pointer-events: none
Github上的CSS：区别就是
margin-top
的不一样。
.ladda-button .ladda-spinner {
position: absolute;
z-index: 2;
display: inline-block;
width: 32px;
height: 32px;
margin-top: 0;
opacity: 0;
pointer-events: none
四、Sonic.js
这个插件是创建一个canvas画布来实现Loaing动画效果。 款式也比较多，如下图所示：
在线demo中还展示了用CSS3动画+CSS Sprite技术实现动画
对于较老版本的浏览器，sonic也做了处理，能将canvas转换成GIF图片。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致