在網(wǎng)頁開發(fā)中，我們經(jīng)常需要使用 ajax 發(fā)送異步請(qǐng)求，但是當(dāng)請(qǐng)求過程中用戶需要等待時(shí)，空等可能會(huì)給用戶帶來不好的使用體驗(yàn)。這時(shí)候，一個(gè)等待遮罩就顯得尤為重要了。 jQuery 提供了一個(gè)等待遮罩的插件——jquery-loading-overlay，它可以為任意 DOM 元素添加一個(gè)遮罩和 loading 動(dòng)畫，讓用戶直觀地感知到請(qǐng)求正在進(jìn)行中。 使用 jquery-loading-overlay 只需要包含它的 js 和 css 文件，然后在發(fā)起 ajax 請(qǐng)求前調(diào)用 $(selector).LoadingOverlay() 即可。 以下是一個(gè)示例：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.loadingoverlay.min.js"></script>
<link href="jquery.loadingoverlay.min.css" rel="stylesheet">
<button id="btn">發(fā)送請(qǐng)求</button>
<div id="result"></div>
<script>
$("#btn").click(function() {
// 添加遮罩
$("#result").LoadingOverlay();
// 發(fā)送 ajax 請(qǐng)求
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos/1",
success: function(data) {
$("#result").html(data.title);
},
complete: function() {
// 移除遮罩
$("#result").LoadingOverlay("hide");
}
});
});
</script>

在該示例中，點(diǎn)擊按鈕后會(huì)在 #result 元素上添加一個(gè)遮罩，然后發(fā)送 ajax 請(qǐng)求。當(dāng)請(qǐng)求完成后，我們使用 LoadingOverlay("hide") 移除遮罩。 需要注意的是，jquery-loading-overlay 有一些可選的參數(shù)可以配置，例如 loading 顏色、透明度、樣式等。更多詳情可以查看官方文檔。 總的來說，使用 jquery-loading-overlay 可以更加優(yōu)化用戶體驗(yàn)，增強(qiáng)用戶滿意度。在需要等待的異步請(qǐng)求場(chǎng)景中，建議使用此插件為頁面添加遮罩。