WeUI数据加载图标在Ajax请求完才显示

1.问题：点击提交按钮，数据加载图标在整个请求结束才出现

2.代码如下：

<!-- loading toast -->
<div id="loadingToast" style="display:none">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据上传中</p>
    </div>
</div>

 

var $loadingToast = $('#loadingToast');
if ($loadingToast.css('display') != 'none') return ;
$loadingToast.fadeIn();
$.ajax({
    url: "/submitImage" ,
    type: "POST",
    async: true,
    cache: false,
    processData: false,// 告诉jQuery不要去处理发送的数据
    contentType: false,// 告诉jQuery不要去设置Content-Type请求头
    data: formData,
    success: function (data) {
        $loadingToast.fadeOut();
    }
});

3.解决方法：

将async：false（同步）改为  async：true（异步），问题解决

4.原因：

同步请求时，会在ajax请求返回之后再执行其他的代码，页面呈现假死状态