显示加载指示器

HTML

<div class="container">
    <h1>在异步加载AJAX内容时，显示加载批器</h1>
    <!--异步加载时显示进度指示器-->
    <a href="javascript:;" class="button" onClick="callAjax();">异步调用AJAX</a>
    <!--从服务器端返回的XML内容-->
    <p id="ajaxcontent"></p>
</div>
					    

JS

	function ajaxindicatorstart(text)            //开始AJAX加载指示器
	{
		//如果不存在加载div，则动态创建并且显示加载div
		if($('body').find('#resultLoading').attr('id') != 'resultLoading'){
		jQuery('body').append('<div id="resultLoading" style="display:none"><div><img src="img/loading.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
		}		
		$('#resultLoading').css({               //为div应用遮罩样式
			'width':'100%',
			'height':'100%',
			'position':'fixed',
			'z-index':'10000000',
			'top':'0',
			'left':'0',
			'right':'0',
			'bottom':'0',
			'margin':'auto'
		});			
		$('#resultLoading .bg').css({          //为div中的背景层应用遮罩样式
			'background':'#000000',
			'opacity':'0.7',
			'width':'100%',
			'height':'100%',
			'position':'absolute',
			'top':'0'
		});		
		$('#resultLoading>div:first').css({     //为div中文字层应用样式
			'width': '250px',
			'height':'75px',
			'text-align': 'center',
			'position': 'fixed',
			'top':'0',
			'left':'0',
			'right':'0',
			'bottom':'0',
			'margin':'auto',
			'font-size':'16px',
			'z-index':'10',
			'color':'#ffffff'			
		});
	    $('#resultLoading .bg').height('100%');//指定背景的高度
        $('#resultLoading').fadeIn(300);       //淡入背景的显示
	    $('body').css('cursor', 'wait');       //更改鼠标光标
	}
	function ajaxindicatorstop()               //定义加载器停止的函数
	{
	    $('#resultLoading .bg').height('100%');//背景高度
        $('#resultLoading').fadeOut(300);      //淡出显示
	    $('body').css('cursor', 'default');    //恢复鼠标光标
	}	 
	function callAjax()                       //异步调用AJAX
	{
		$.ajax({
			type: "GET",
			url: "test.php",                   //指定调用的服务器文件地址
			cache: false,
			success: function(res){
					$('#ajaxcontent').html(res);
			}
		});
	}	
  $(document).ajaxStart(function () {      //关联ajaxStart事件   		
	ajaxindicatorstart('正在加载，请稍候..');//显示AJAX进度指示器
  }).ajaxStop(function () {
	ajaxindicatorstop();                     //隐藏AJAX进度指示器
  });