1. 程式人生 > >用載入圖片解決在ajax資料載入中頁面出現短暫空白的問題

用載入圖片解決在ajax資料載入中頁面出現短暫空白的問題

在專案中用ajax非同步獲取資料後有時會因為資料問題或者網路問題,頁面一直顯示空白,現在用載入圖片來過渡這種狀態:

<script>
	$(function(){
		$.ajax({
			url:'',//提供介面的檔案地址連結
			dataType:'json',
			type:'POST',	
			beforeSend: function(){
				$('#loading').html("<img src=\"images/loading.gif\" width=\"15%\" style=\"text-align:center;margin:0 auto;\"><p style=\"color:#999;font-size:14px\">載入中,請稍後……</p>") //資料傳送過程中先載入圖片	
			},
			error: function(msg){ //資料讀取失敗顯示
				zNodes=data.responseJson;
				alert("對不起,資料獲取失敗,請聯絡管理員");
			},
			success:function(msg){ //資料讀取成功並顯示資料列表
				$('#loading').fadeOut(1000);	//圖片顯示時間;
				var ul = "";
				for(var i= 0;i<msg.legth;i++){ //資料列表行數
					ul += "<li class='list'><a href='php/phpArticle.php?art="+msg[i]['id']+" 'class='widget-list-link'>" + msg[i]['title']+"<i class='more-mark'>"+">>"+"</i></a></li>";
				} 
					$("#list").html(ul);
				
			},
			error:function(){ //失敗時顯示
				console.log("連結錯誤") ;
			}
		});
	});
	
</script>

資料在載入狀態顯示