jQuery Ajax 加载数据时异步显示加载动画

一、什么是 jQuery Ajax

jQuery 是一种常用的 JavaScript 库，jQuery Ajax 用于通过 AJAX 请求从服务器异步地获取数据。

我们可以使用 jQuery 的 Ajax 方法来与服务器交换数据，从而实现在不重新加载网页的情况下，局部更新页面内容的效果。

二、异步显示加载动画

异步加载数据时，许多网站会显示一个动画，以提示用户正在加载数据，并防止用户误以为网站崩溃。

我们可以使用 jQuery 中的 Ajax start 和 Ajax stop 方法，在 Ajax 请求开始和结束时显示和隐藏加载动画。

1. 示例一：使用 Loading.io 的 CSS 加载动画

<!--HTML-->
<p class="content">这是一个页面</p>
<div id="loading">
    <div class="loader"></div>
</div>

<!--CSS-->
#loading{
    display:none;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:#fff;
    opacity:0.7;
    z-index:9999;
}

.loader {
    border: 10px solid #f3f3f3;
    border-top: 10px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

//JS
$(document).ajaxStart(function(){
    $("#loading").fadeIn();
});
$(document).ajaxStop(function(){
    $("#loading").fadeOut();
});
//Ajax 请求
$.ajax({
    url: "test.html",
    success: function(result){
        $(".content").html(result);
    }
});

1. 示例二：使用第三方插件 blockUI 加载动画

<!--HTML-->
<p class="content">这是一个页面</p>

<!--JS-->
//导入 blockUI js 和 css
//Ajax 请求前使用 blockUI 显示加载动画
$.ajax({
    url: "test.html",
    beforeSend: function() { 
        $.blockUI({ message: '<h1><img src="busy.gif" /> 正在加载数据，请稍后...</h1>' }); 
    },
    success: function(result){
        $(".content").html(result);
    },
    //Ajax 请求完成进行清理（解锁页面）
    complete: function() {
        $.unblockUI(); 
    }
});

三、注意事项

其中第二个示例使用了第三方插件 blockUI，使用时需要注意：

• 插件依赖 jQuery 库，需要首先导入 jQuery 库
• 插件需要同时导入 js 和 css 文件
• 插件的界面需要使用 css 自己进行美化，或者使用提供的 CSS 主题
• 界面在使用一个块的效果时可能会使您的应用程序的性能下降（具体实现方式有所不同）

总之，合理使用 jQuery Ajax 加载数据时异步显示加载动画可以有效地改善用户体验。