AJAX顯示加載中并彈出圖層遮擋頁面的實(shí)現(xiàn)示例
前言
相信每位開發(fā)者都應(yīng)該有所了解,當(dāng)用戶發(fā)出AJAX請求時(shí),如果長時(shí)間處于請求階段,而沒有給出用戶回應(yīng),會(huì)給用戶造成錯(cuò)覺,導(dǎo)致用戶以為我們的系統(tǒng)“沒反應(yīng)“了。這從某方面來講是一種不友好。
甚至有的時(shí)候,用戶看不到想要的結(jié)果,就會(huì)不停的請求,這樣會(huì)發(fā)生意想不到的后果。
所以,當(dāng)發(fā)出AJAX請求時(shí),我們給出一定的措施,保證系統(tǒng)的正確運(yùn)行和良好的用戶體驗(yàn)。
在這里,我使用的是:顯示加載中圖片,并彈出一個(gè)圖層,使用戶不能再次發(fā)出請求。
實(shí)現(xiàn)方法
HTML部分:
<div id="loading" class="loadingdiv"> <img src="images/data-loading.gif" alt="圖片加載中···" /> </div>
HTML部分只需要放置一個(gè)div,里面包含一個(gè)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進(jìn)行樣式設(shè)置。
JS代碼
//ajax請求過程中,顯示加載中圖片并顯示圖層,請求完成隱藏圖片 $(function () { //注冊ajax加載事件 $("#loading").ajaxStart(function () { //一個(gè)div,用來遮擋頁面,請求過程中,不可操作頁面 var lockwin = $(this); //div占滿整個(gè)頁面 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é)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- jQuery+AJAX實(shí)現(xiàn)無刷新下拉加載更多
- 用ajax動(dòng)態(tài)加載需要的js文件
- php+ajax+jquery實(shí)現(xiàn)點(diǎn)擊加載更多內(nèi)容
- php+ajax實(shí)現(xiàn)無刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
- ajax提交加載進(jìn)度條示例代碼
- 使用ajax加載的頁面中包含的javascript的解決方法
- jquery Ajax 實(shí)現(xiàn)加載數(shù)據(jù)前動(dòng)畫效果的示例代碼
- 滑輪滾動(dòng)到頁面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- JQuery實(shí)現(xiàn)Ajax加載圖片的方法
- Jquery ajax加載等待執(zhí)行結(jié)束再繼續(xù)執(zhí)行下面代碼操作
相關(guān)文章
ajax 怎么設(shè)置超時(shí)(一個(gè)action執(zhí)行了2遍)
一個(gè)action執(zhí)行了2遍 ,這個(gè)操作大致需要5分多鐘才能完成,于是搜了幾個(gè)可以設(shè)置超時(shí)的地方,希望對大家有所幫助2014-08-08滑輪滾動(dòng)到頁面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
滾動(dòng)下拉到頁面底部加載數(shù)據(jù)是很多瀑布流網(wǎng)站的做法,那來看看配合jsonp是如何實(shí)現(xiàn)的吧,小菜總結(jié)記錄之用特在此與大家一起分享,感興趣的朋友可以參考下哈2013-05-05ajax返回的json內(nèi)容進(jìn)行排序使用sort()方法實(shí)現(xiàn)
關(guān)于ajax返回的json內(nèi)容進(jìn)行排序,主要使用sort()對數(shù)組的元素進(jìn)行排序,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07用ajax xml的數(shù)據(jù)讀取的HelloWorld程序
我們經(jīng)常會(huì)使用JavaScript實(shí)現(xiàn)動(dòng)態(tài)的改變div里面的內(nèi)容,尤其是使用ajax的時(shí)候,尤為重要。2009-04-04