在ajax调用之前加载图像不能正常工作

Question

我完成了同步AJAX请求，我想在AJAX调用之前显示一个图像。

带有请求的javascript

var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$('#loading').modal('show');
var formData = new FormData($(this)[0]);
var url1 = "/upload";
$.ajax({
    url: url1,
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    async: false,
    beforeSend: beforeSendHandler,
    success: function(data) {
        var msg = data.msg;
        var obj = data.obj;
        if (data.success == true) {
            $('input').val('');
            $('#loading').modal('hide');
            //logic here
        } else {
            //logic here
        }
    }
});

function beforeSendHandler(xhr) {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    xhr.setRequestHeader(header, token);
}

这适用于Firefox，但不是Chrome，我在stackoverflow找到了不同的解决方案，我试过了。但我没有得到确切的解决方案。

我的Chrome版本：62.0.3202.94（官方版本）（64位）。