页面进行ajax时 显示一个中间浮动loading

先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的loading弹层。

适用于触屏和pc页面。

页面进行ajax时 显示一个中间浮动loading

 

/*

	页面进行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);

  

你可能感兴趣的:(Ajax)