标签:
先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的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);
标签:
原文地址:http://www.cnblogs.com/dtdxrk/p/4569063.html