读取等待 纯H5 JS

//var loader = new LOADER("loading");
//loader.show();
//loader.hide();
//loader.reset("loading2");
//loader.show();
var LOADER = function(target, options){
	
	var loader;
	var obj = (typeof target === 'string') ? document.getElementById(target) : target;
	var lockScroll = false;
	this.options = {
		scrolled : false
		,autoHide : true
		,duration : 6500
	};
	for (var key in options) {
        if (options.hasOwnProperty(key)) {
            if(key == "duration") {
            	this.options[key] = options[key] || 6500;
            } else {
            	this.options[key] = options[key];
            }
        }
   	};
   	this.show = function(callback) {
		loader.style.display = "block";
		obj.style.display = "block";
		if(!self.options.scrolled){
			lockScroll = true;
			document.addEventListener("touchmove",scrollListener,false);
		}
		if(self.options.autoHide) {
			setTimeout(function(){
				self.hide(callback);
			},self.options.duration);
		} else {
			if (callback) {
				callback.call(this);
			}
		}
	};
	this.hide = function(callback) {
		loader.style.display = "none";
		obj.style.display = "none";
		lockScroll = false;
		document.removeEventListener("touchmove",scrollListener,false);
		if (callback) {
			callback.call(this);
		}
	};
	this.reset = function(target) {
		obj.removeChild(loader);
		obj = (typeof target === 'string') ? document.getElementById(target) : target;
		obj.appendChild(loader);
	};
	var self  = this;
	var createLoader = function(){
		loader = document.createElement("div");
		loader.style.display = "block";
		loader.className = "ball-pulse";
		for(var i = 0; i <3 ;i++) {
			var ball = document.createElement("div");
			loader.appendChild(ball);
		}
	};
	var init = function() {
		if(!loader){
			createLoader();
		}
		obj.appendChild(loader);
	};
	var scrollListener = function(e) {
		if(lockScroll){
			e.preventDefault();
			e.stopPropagation();
		}
	};
	init();
};


#lo {
	height: 100%;
	width: 100%;
	max-width: 414px;
	text-align: center;
	position: fixed;
	z-index:99999;
	top: 0px;
	background: rgba(0,0,0,0.3);
	display: none;
}
.loader{
	width: 100%;
	text-align: center;
}


<div id="lo"></div>

var loader = new LOADER("lo");

loader.show();

loader.hide();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值