前言
相信每位開發人員都應該有所瞭解,當使用者發出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"); }); });
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的協助,如果有疑問大家可以留言交流。