7

Possible Duplicate:
How to make GIF rotate when the tree is loading in Javascript

Like the title says, my loading gif freezes while going through an ajax success call. The success call has some heavy DOM manipulation to do, and since the UI is single threaded, it causes my loading gif to freeze.

So far I have tried to

  1. Optimize my functions, but there is so much data that has to be loaded at the same time.
  2. Use setTimeout(), but it shows all the gifs after everything is loaded.
  3. Use spin.js, but it too freezes during the DOM manipulation.

Is there any way to get around this?

Any help is very much appreciated.

EDIT 1:
It's related to ArcGIS javascript, where I have to retrieve about 4000 rows from the database, and then show points at the correct latitude and longitude via a for-loop that goes through all the points.
I'm trying to make a simple overview like this one?.

Community
  • 1
  • 1
sylar
  • 366
  • 2
  • 9
  • what about some css animations instead of animated gif? – Fabrizio Calderan Jan 07 '13 at 14:59
  • Can you show how you're processing your data? – Matthew Jan 07 '13 at 14:59
  • @Matthew no need to, a .gif will not animate while there's some AJAX loading. Had the same issue days ago. – Roko C. Buljan Jan 07 '13 at 15:00
  • @roXon Ajax is not the problem, the problem is the processing of the Ajax result it is not relinquishing control to the UI process. – Matthew Jan 07 '13 at 15:02
  • I have run into this very often with SPAs. I usually break my DOM manipulation into small chunks that can safely be handled out of sync, then set zero duration timeouts for all of the "chunks" at once. – Asad Saeeduddin Jan 07 '13 at 15:03
  • Reduce the number of writes to the DOM. Without seeing your code, it is impossible to tell you how to break it up. – epascarello Jan 07 '13 at 15:04
  • If even spin.js is freezing, it appears to me as if there is too much memory hardware overload (peak) in a small period of time. Soemthing which isn't really code related. Optmising your code should help, however. – Bram Vanroy Jan 07 '13 at 15:05
  • @epascarello A large, drastic DOM modification instead of several minor ones actually worsens the freezing. – Asad Saeeduddin Jan 07 '13 at 15:07
  • @Asad It really depends on what is being added to the page and how many update operations it is. I deal with making sites faster, there is not a one size fits all solution. – epascarello Jan 07 '13 at 15:47
  • actually, this is related to arcgis javascript. i make a db call, it gets about 4000 rows. and then its just a simple for loop to add all individual points. EDITED MY QUESTION – sylar Jan 07 '13 at 15:49
  • @epascarello for(i = 0; i – sylar Jan 07 '13 at 15:57

1 Answers1

4

You have to emulate multithreading in order to let the UI remain responsive while the AJAX response is processed.

The only non-trivial part of this is to arrange the processing function so its task can be splitted and performed by steps.

As you have got the data you call:

function ProcessData() {
    var done = false;        

    /*
        access the data here and perform a "bit" of data processing.

        if the task finishes set done to true
    */

    if(!done) {
        setTimeout(ProcessData, 100); // this gives the UI 0,1 secs
    }
}

Of course the above function must be have some way to access the data (with a global or, better, properly setting its context), register the progress of the operation and so on.

It's just to give an idea but there is a lot on the web that explains in detail.

Or you may get a copy of "Secrect of the JavaScript Ninja" and read the chapter "Taming threads and timers".

Hope this helps.

Paolo
  • 15,233
  • 27
  • 70
  • 91
  • would the above function work for showing and hiding my gif instead of processing my data? – sylar Jan 07 '13 at 17:10
  • 2
    @sylar You've got it backwards, hiding and showing the gif won't help you. I think the answerer means that, in order to keep the UI responsive, you need to give it some room to "breathe". For instance, you could process 100 points at a time, then set a timeout, and then process the next 100 points and then repeat until all points have been processed. It will increase the overall load time, but it removes the one time load of all the nodes, thus freeing up the UI to animate the gif or do other things. This gives the *illusion* of multi-threading. – ShadowScripter Jan 07 '13 at 17:23
  • @sylar No. Processing all your data as a whole will freeze the browser's page. The gif is the last of your problems. All the UI becoes unresponsive. Also, I think the iPhone kills any script running for too long (5 seconds, maybe..) – Paolo Jan 07 '13 at 17:38
  • gotcha, will try to implement this way. thanks guys – sylar Jan 07 '13 at 17:59