在網(wǎng)頁開發(fā)中,我們常常會使用Ajax技術(shù)實(shí)現(xiàn)局部刷新和異步加載等功能。但是,如果在通訊過程中用戶沒有得到及時的反饋,可能會給用戶帶來糟糕的體驗(yàn)。為了讓用戶知道正在發(fā)生什么,我們可以使用遮罩遮住頁面部分來提示用戶正在加載。
//在Ajax通訊開始時添加遮罩 $(document).ajaxStart(function(){ $("#mask").css("display","block"); }) //在Ajax通訊結(jié)束時移除遮罩 $(document).ajaxStop(function(){ $("#mask").css("display","none"); })
上面的代碼中,我們使用了jQuery中的ajaxStart和ajaxStop方法來在Ajax通訊開始和結(jié)束時添加和移除遮罩。其中,#mask是我們事先定義好的遮罩元素,可以是一個圖片、一個動態(tài)的加載圖標(biāo)或者一個半透明的背景等等。
通過這種方式,我們可以在Ajax通訊過程中顯示遮罩,讓用戶看到正在加載,并且在通訊結(jié)束后立即隱藏遮罩,給用戶良好的交互體驗(yàn)。