码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-06-11 16:18:02      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的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);

  

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

标签:

原文地址:http://www.cnblogs.com/dtdxrk/p/4569063.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!