前言

相信每位開發者都應該有所了解，當用戶發出AJAX請求時，如果長時間處于請求階段，而沒有給出用戶回應，會給用戶造成錯覺，導致用戶以為我們的系統“沒反應“了。這從某方面來講是一種不友好。

甚至有的時候，用戶看不到想要的結果，就會不停的請求，這樣會發生意想不到的后果。

所以，當發出AJAX請求時，我們給出一定的措施，保證系統的正確運行和良好的用戶體驗。

在這里，我使用的是：顯示加載中圖片，并彈出一個圖層，使用戶不能再次發出請求。

實現方法

HTML部分：

<div id="loading" class="loadingdiv">     <img src="images/data-loading.gif" alt="圖片加載中···" /> </div> 

HTML部分只需要放置一個div，里面包含一個img。

CSS樣式：

/*圖片加載中div圖層，用于遮擋頁面*/ .loadingdiv {   position:absolute;   text-align:center;   left:0px;   top:0px;   z-index:70;   background-color:#000000;   opacity: 0.7;/*透明#CCCCCC*/   display:none;   }   /*加載中圖片*/ .loadingdiv img {   position:absolute;   left:0px;   top:0px;   z-index:80;   } 

對div和img進行樣式設置。

JS代碼

//ajax請求過程中，顯示加載中圖片并顯示圖層，請求完成隱藏圖片 $(function () {   //注冊ajax加載事件   $("#loading").ajaxStart(function () {     //一個div，用來遮擋頁面，請求過程中，不可操作頁面     var lockwin = $(this);     //div占滿整個頁面     lockwin.css("width", "100%");     lockwin.css("display", "block");     lockwin.css("height", $(window).height() + $(window).scrollTop());     //設置圖片居中     $("#loading img").css("display", "block");     $("#loading img").css("left", ($(window).width() - 88) / 2);     $("#loading img").css("top", ($(window).height() + $(window).scrollTop()) / 2);   });    $("#loading").ajaxStop(function () {     //隱藏div     var lockwin = $(this);     lockwin.css("width", "0");     lockwin.css("display", "none");     lockwin.css("height", "0");     //設置圖片隱藏     $("#loading img").css("display", "none");   }); }); 

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。