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

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

零点几秒：1登录到控制台

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

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

0:10秒：GIF开始播放。

这没有任何意义，是设置一个IMG异步或什么的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); 
    } 
});

来源

2017-08-08 Ntrer1cal

是的，设置“src”属性会启动一个HTTP请求来获取图像，这是异步的。 – Pointy

今天我学到了，谢谢！ – Ntrer1cal

负载

之前$.ajax()呼叫的图像。将<img>元素的CSS display属性切换为beforeSend函数，而不是更改<img>元素的.src。

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

来源

2017-08-08 22:52:29 guest271314

通过改变“SRC”读取图像是异步的，我想你可以设置src当页面负载，但使图像元素不可见。并且在Ajax开始时将图像设置为可见。

来源

2017-08-08 23:07:14 Barry

如果更改src属性，浏览器必须完成一堆内容，例如在其缓存中查找图像，可能会重新请求图像，解析a.s.o.

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

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

来源

2017-08-08 23:11:33 nininho

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

回答

相关问题