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请求返回之后再执行其他的代码,页面呈现假死状态

猜你喜欢

转载自www.cnblogs.com/slpa/p/13175748.html