AJAX顯示載入中並彈出圖層遮擋頁面的實現樣本_AJAX相關

來源:互聯網
上載者:User

前言

相信每位開發人員都應該有所瞭解,當使用者發出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");   }); }); 

總結

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.