前言
相信每位開(kāi)發(fā)者都應(yīng)該有所了解，當(dāng)用戶發(fā)出AJAX請(qǐng)求時(shí)，如果長(zhǎng)時(shí)間處于請(qǐng)求階段，而沒(méi)有給出用戶回應(yīng)，會(huì)給用戶造成錯(cuò)覺(jué)，導(dǎo)致用戶以為我們的系統(tǒng)“沒(méi)反應(yīng)“了。這從某方面來(lái)講是一種不友好。
甚至有的時(shí)候，用戶看不到想要的結(jié)果，就會(huì)不停的請(qǐng)求，這樣會(huì)發(fā)生意想不到的后果。
所以，當(dāng)發(fā)出AJAX請(qǐng)求時(shí)，我們給出一定的措施，保證系統(tǒng)的正確運(yùn)行和良好的用戶體驗(yàn)。
在這里，我使用的是：顯示加載中圖片，并彈出一個(gè)圖層，使用戶不能再次發(fā)出請(qǐng)求。
實(shí)現(xiàn)方法
HTML部分：
div id="loading" class="loadingdiv">
img src="images/data-loading.gif" alt="圖片加載中···" />
/div>
HTML部分只需要放置一個(gè)div，里面包含一個(gè)img。
CSS樣式：
/*圖片加載中div圖層，用于遮擋頁(yè)面*/
.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;
}
對(duì)div和img進(jìn)行樣式設(shè)置。
JS代碼
//ajax請(qǐng)求過(guò)程中，顯示加載中圖片并顯示圖層，請(qǐng)求完成隱藏圖片
$(function () {
//注冊(cè)ajax加載事件
$("#loading").ajaxStart(function () {
//一個(gè)div，用來(lái)遮擋頁(yè)面，請(qǐng)求過(guò)程中，不可操作頁(yè)面
var lockwin = $(this);
//div占滿整個(gè)頁(yè)面
lockwin.css("width", "100%");
lockwin.css("display", "block");
lockwin.css("height", $(window).height() + $(window).scrollTop());
//設(shè)置圖片居中
$("#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");
//設(shè)置圖片隱藏
$("#loading img").css("display", "none");
});
});
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
您可能感興趣的文章:- jQuery+AJAX實(shí)現(xiàn)無(wú)刷新下拉加載更多
- 用ajax動(dòng)態(tài)加載需要的js文件
- php+ajax+jquery實(shí)現(xiàn)點(diǎn)擊加載更多內(nèi)容
- php+ajax實(shí)現(xiàn)無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
- ajax提交加載進(jìn)度條示例代碼
- 使用ajax加載的頁(yè)面中包含的javascript的解決方法
- jquery Ajax 實(shí)現(xiàn)加載數(shù)據(jù)前動(dòng)畫(huà)效果的示例代碼
- 滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- JQuery實(shí)現(xiàn)Ajax加載圖片的方法
- Jquery ajax加載等待執(zhí)行結(jié)束再繼續(xù)執(zhí)行下面代碼操作
