用于ajax调用或密集操作的Javascript加载div

Posted 2021-02-26

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')