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?