用載入圖片解決在ajax資料載入中頁面出現短暫空白的問題
阿新 • • 發佈:2019-02-12
在專案中用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>