页面进行ajax时 显示一个中间浮动loading
先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的loading弹层。
适用于触屏和pc页面。

/*
页面进行ajax时 显示一个中间浮动loading
@auther: LM
@date: 2015-6-10
@rely: html5触屏
@fun: LM_loading.show(); //显示
@fun: LM_loading.hide(); //隐藏
*/
(function(window){
var LM_loading = {
Timmer:null,
creatLoading:function(){
var div = document.createElement('div');
div.id = 'LM_loading';
div.innerHTML = 'Loading......';
div.style.cssText = 'z-index:9999;display:none; -webkit-border-radius:10px;text-align: center;position: fixed;top:50%;left:50%;margin:-50px 0 0 -100px; width: 200px;height: 100px;line-height: 100px;background: rgba(0,0,0,0.5);color: #fff;font-size: 18px;';
this.div = div;
document.body.appendChild(this.div)
},
show:function(){
if(!this.div){this.creatLoading();}
this.div.style.display = 'block';
},
hide:function(){
var that = this;
if(!that.div){that.creatLoading();}
clearTimeout(that.Timmer);
that.Timmer = setTimeout(function(){
that.div.style.display = 'none';
},200);
}
}
window['LM_loading'] = LM_loading;
})(window);
浙公网安备 33010602011771号