Javascript JQuery：为什么ajax请求在beforeSend中的代码完成执行之前执行？

这是我的密码。基本上，我有一个Reload.gif，在发送ajax请求重新加载数据之前，我想在我的页面上开始播放它。然而，最终发生的事情是，它只有在调用成功函数后才会开始播放。这是时间线的样子：

0:00秒：1记录到控制台

0:00秒：2记录到控制台

0:10秒：3记录到控制台

0:10秒：GIF开始播放

这没有意义，是设置img异步的src还是什么？ 图像代码：

jQuery.ajax({
    url: url,
    type: 'GET',
    timeout: 20000,
    beforeSend: function() {
        console.log(1);
        document.getElementById('reloadIcon').src = "/img/Reload.gif";
        console.log(2);
    },
    success: function (result) {
        console.log(3);
    }
});

---

在调用

$.ajax（）之前加载图像。切换
元素的
的CSS
显示属性

jQuery.ajax({
    url: url,
    type: 'GET',
    timeout: 20000,
    beforeSend: function() {
        console.log(1);
        document.getElementById('reloadIcon').style.display = "block";
        console.log(2);
    },
    success: function (result) {
        document.getElementById('reloadIcon').style.display = "none";
        console.log(3);
    }
    , error: function() {
        document.getElementById('reloadIcon').style.display = "none";
    }
});

通过更改“src”来获取图像是异步的，我认为您可以在加载页面时设置src，但使图像元素不可见。并在ajax开始时将图像设置为可见。
如果更改src属性，浏览器必须完成一系列操作，如在其缓存中查找图像，可能重新请求图像、解析、a.s.o

其次，您的JS代码与许多其他东西共享一个线程。浏览器倾向于在内部缓存CSS分配，并首先执行以下JS代码，只要右键丢失，缓存的更改不会影响代码的功能。如果在这种情况下要强制指定，请阅读特定的CSS属性，浏览器将在指定之前指定更改。我倾向于声明（未经测试），属性上也存在这种行为

这种情况下的最佳实践是来自guest271314的帖子，隐藏和显示外部容器更快更可靠。
是的，设置“src”属性会启动HTTP请求以获取图像，这是异步的。啊，今天我学到了，谢谢！