javascript - 为什么这张图片在发送 AJAX 请求之前不显示并在完成时隐藏？

Question

我正在尝试在处理我的 AJAX 请求时使“正在加载”gif 可见。所以我有

beforeSend: function () { 
   $('.form-sending-gif').show(); 
   console.log("The beforeSend function was called"); 
}

和

complete: function () { 
   $('.form-sending-gif').hide(); 
   console.log("The complete function was called"); 
}

console.log 仅用于测试目的。出于未知原因，我已经确认这两个功能都在触发，但图像并没有像预期的那样显示隐藏。我在控制台中输入了 $('.form-sending-gif').show() 以验证所述函数是否执行预期的操作。在页面加载时图像是

我做错了什么？

Answer 1

如果没有从您的问题中获得更多细节，很难回答问题，但无论如何我都会尝试一下。

你可以尝试这样的事情。

$(function () {

    // On click func
    $('#test').click(function(){
        // Set loading image to display here
        $('#test').text('Greetings')

        // Simulated ajax request(put your ajax here)
        var ajaxCallDfd = $.Deferred();
        setTimeout(function () {
            ajaxCallDfd.resolve();
        }, 1000);

        // When the ajax is finished Then we display the loaded image.
        $.when(ajaxCallDfd).then(function(){
            $('#test').text('Goodbye')
        })
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test"> Hi </div>