Backbone.js - CSS更改正在等待JavaScript完成 - 在Firefox中工作，而不是在Chrome

Backbone.js - CSS change is waiting till javascript is completed - works in Firefox, not in Chrome/Safari

本文关键字：工作 Firefox Chrome 完成 CSS js JavaScript 在等待 Backbone      更新时间：2023-09-26

我正在编写一个主干.js应用程序。

当用户按下"搜索"按钮时，我显示一个加载.gif图像（通过使其阻止），同时我让javascript代码继续。javascript 代码完成后，我取消隐藏加载图像（将显示更改为 none）。

我能够看到它在火狐中工作。在 safari/和 chrome 中，在 javascript 代码完成之前不会应用 CSS 的更改，因此用户在执行搜索时看不到加载图像。

有什么方法可以解决这个问题吗？

谢谢

有几件事我觉得很奇怪......但首先要回答你的问题：

大多数 DOM/css 更改在执行 Javascript 返回之前不会应用。 要解决这个问题，你可以对 DOM 进行更改，然后设置超时来执行其余的 Javascript 代码。

前任：

// make your image visible
function continuation() {
   // Put the javascript task that you need to execute here
}
// setTimeout will release execution control back to the browser so your CSS/DOM updates
// can be applied.  Once those updates are applied, continuation will be called
// by the browser and your remaining javascript can run.
setTimeout(continuation, 0);

现在看起来很奇怪，你会有任何需要很长时间才能运行的 javascript，以至于你甚至有时间看到加载的 gif。 如果您正在触发 XHR （ajax） 请求，那么看到加载图像是有意义的，但如果您正在这样做，那么您不应该遇到您所描述的问题。 你的这个JavaScript任务到底在做什么？

我在加载图像时遇到了类似的问题，结果证明是因为图像尚未加载到浏览器中，并且出于某种原因，直到其他事情完成它才显示。我相信在我的情况下，XHR以某种方式阻止了图像的加载或显示。从内存中，这仅在第一次显示加载图像时发生，之后就可以了。我最终在页面 html 中添加了一个元素来加载加载图像，然后用 javascript 将其隐藏。这解决了问题。

相关文章：