Question

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

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

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

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

由于

Answer 1

有些事情让我感到奇怪......但首先回答你的问题：

在执行Javascript返回之前，大多数DOM / css更改都不会应用。要解决此问题，您可以更改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任务到底是做什么的？

Answer 2

我在加载图片方面遇到了类似的问题，原因是图片没有加载到浏览器中，无论出于何种原因，它都没有显示，直到其他内容完成。我相信在我的情况下，XHR以某种方式阻止了图像的加载或显示。从内存来看，这只发生在第一次显示加载图像时，之后就可以了。我最后在页面html中添加了一个元素来加载加载图像，然后用javascript隐藏它。这解决了这个问题..

Backbone.js - CSS更改等待javascript完成 - 在Firefox中运行，而不是在Chrome / Safari中运行

2 个答案: