JavaScript Javascript加载div进行ajax调用或密集操作

Posted 2021-05-20

LOADING = {
	showLoading: function(title, help, image) {
		
		var default_skin = "#ajax-load-background {opacity:0.55; position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: none repeat scroll 0% 0%; background-color:#000; z-index: 4999;}#ajax-load {position: fixed;z-index: 5000;top: 50%;left: 50%; margin-left: -20px;text-align: center;}#ajax-load #ajax-load-title, #ajax-load #ajax-load-help {color: #fff;}#ajax-load #ajax-load-title {font-size: 16px;}#ajax-load #ajax-load-help {font-size: 10px;}";
		
		var head = document.getElementsByTagName("head")[0];
		
		// tricky hack for IE
	    var htmDiv = document.createElement('div');
	
	    htmDiv.innerHTML = '<p>x</p><style type="text/css">'+default_skin+'</style>';
	    head.insertBefore(htmDiv.childNodes[1], head.firstChild);
		
		var bgDiv = document.createElement('div');
		bgDiv.id = 'ajax-load-background';
		
		var mainDiv = document.createElement('div');
		mainDiv.id = 'ajax-load';
		
		var titleDiv = document.createElement('div');
		titleDiv.id = 'ajax-load-title';
		titleDiv.innerHTML = title;
		
		var imgLoading = document.createElement('img');
		imgLoading.src = image;
		
		var helpDiv = document.createElement('div');
		helpDiv.id = 'ajax-load-help';
		helpDiv.innerHTML = help;
		
		mainDiv.appendChild(titleDiv);
		mainDiv.appendChild(imgLoading);
		mainDiv.appendChild(helpDiv);
		
		document.body.appendChild(bgDiv);
		document.body.appendChild(mainDiv);
	},
	
	hideLoading: function() {
		if ( document.getElementById('ajax-load-background') ) {
			document.getElementById('ajax-load').parentNode.removeChild(document.getElementById('ajax-load'));
			document.getElementById('ajax-load-background').parentNode.removeChild(document.getElementById('ajax-load-background'));
		}
	}
}

LOADING.showLoading('Loading', 'please wait', './images/loading.gif')