zoukankan      html  css  js  c++  java
  • 页面进行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;  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);
    

      

  • 相关阅读:
    Tomcat域名绑定
    Windows下搭建PHP开发环境
    创业项目该如何选择技术?
    linux mount 挂接新硬盘
    Linux 查看系统硬件信息
    this super的用法
    构造方法
    多态
    抽象类和接口
    继承
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/4569063.html
Copyright © 2011-2022 走看看