Question

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

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

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

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

0:10秒：GIF开始播放。

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

<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()通话前加载图片。在display函数处切换<img>元素的CSS 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

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

Answer 3

如果更改了src属性，浏览器必须完成一系列事情，比如在其缓存中查找图像，可能会重新请求图像，解析，a.s.o。

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

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

JQuery：为什么在beforeSend执行代码之前执行ajax请求？

3 个答案: