AJAX–顯示載入中並彈出圖層遮擋頁面

眾所周知，AJAX的請求是非同步，這種非同步機制給我們帶來了體驗上的最佳化，但是同時我要求我們有更完善的思維去處理一個業務。

當使用者發出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");    });});

JS程式碼完成事件的觸發。

到這裡為止，我們就完成了這樣的效果：發出AJAX請求，顯示載入中圖片，並彈出圖層覆蓋整個頁面。

這裡我搜集了一百張的loading動畫圖片，需要的可以下載一下！

點擊開啟連結

積分不過的可以email我啊！嘿嘿.