Backbone.js-CSS更改正在等待JavaScript完成-在Firefox中有效，而在Chrome / Safari中不起作用

Question

I am having a backbone.js application that I am writing.

When user press a "Search" button, I show a loading.gif image (by making it block), while I let the javascript code to continue. Once the javascript code is complete, I unhide the loading image (changing the display to none).

I am able to see it working in Firefox. In safari/and chrome, the change of CSS don't get applied until the javascript code is completed, and thus user don't see the loading image when the search is being performed.

Any way to fix this?

Thanks

Answer 1

A couple of things strike me as odd.. but to answer your question first:

Most DOM/css changes do not get applied until the executing Javascript returns. To get around this you can make your DOM change and then set a timeout to execute the rest of your Javascript code.

ex:

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

---

Now it seems odd that you would have any javascript that would take so long to run that you'd have time to even see a loading gif. It would make sense to see a loading image if your are firing an XHR (ajax) request but if you are doing that then you shouldn't be having the issue you are describing. What exactly is this javascript task of yours doing?

Answer 2

I had a similar issue with a loading image which turned out to be because the image hadn't been loaded into the browser and for whatever reason it didn't display until something else completed. I believe in my case an XHR was somehow blocking the loading or display of the image. From memory, this only happened the first time the loading image was displayed, after that it was fine. I ended up adding an element to the page html to load the loading image and then hid it with javascript. This solved the problem..