使用載入圖片解決在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>

資料在載入狀態顯示

以上所述是小編給大家介紹的用載入圖片解決在Ajax資料載入中頁面出現短暫空白的問題(推薦)，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！