欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AJAX顯示加載中并彈出圖層遮擋頁面的實(shí)現(xiàn)示例

 更新時(shí)間:2016年12月19日 09:44:46   投稿:daisy  
大家都知道AJAX的請求是異步的,這種異步的機(jī)制給我們帶來了體驗(yàn)上的優(yōu)化,但是同時(shí)我要求我們有更完善的思維去處理一個(gè)業(yè)務(wù)。當(dāng)用戶請求后長時(shí)間沒有回應(yīng)是一種非常不好的用戶體驗(yàn),所以我們可以在請求后利用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í)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。

相關(guān)文章

最新評論