jQuery：为什么要在执行beforeSend中的代码之前执行ajax请求？

Question

这是我的代码。 基本上，在发送ajax请求以重新加载数据之前，我想在页面上开始播放Reload.gif。 但是最终发生的事情是它只会在调用我的成功函数后才开始播放。 时间线如下所示：

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

0:00秒：2已登录控制台

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

0:10秒：GIF开始播放。

这没有道理，是将img的src设置为async还是其他？ 图片代码：

<img id="reloadIcon" src="/img/Reload.png" style="width: 25px; height: 25px"/>

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);
    }
});

Answer 1

在$.ajax()调用之前加载图像。 切换CSS display的属性的<img>在元件beforeSend而不是改变的功能， .src所述的<img>的元素。

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";
    }
});

Answer 2

通过更改“ src”来获取图像是异步的，我认为您可以在页面加载时设置src，但是使图像元素不可见。 并在ajax开始时将图像设置为可见。

Answer 3

如果更改src属性，则浏览器必须完成一堆事情，例如在其缓存中查找图像，可能会重新请求图像，解析，aso

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

在这种情况下，最佳实践是guest271314的帖子，隐藏并显示外部容器要更快，更可靠。