How to make GIF rotate when a tree loads in Javascript

Question

I have a tree that fills through the web service - this part is very fast, the part that fills the tree a little slower ... I have a rotating gif image that rotates when the service loads. Since I use the ajaxStop and ajaxStart trigger, the gif stops spinning after the ajax request completes, which is correct. However, since loading takes a few seconds, the gif freezes in this fraction of a second, which looks unprofessional.

How to make gif rotate until the tree finishes loading?

Answer 1

Browsers provide a low priority for updating the image, so during your code it manipulates / inserts into the DOM, the browser is busy with this and does not have time to redraw the image.

There is not much that you can do, in addition to optimizing the code, so that the processing that you do with ajax data is less intensive or, for example, if you get a list of 1000 elements, insert them into pages with an interval of 50, with a slight delay between them, so the browser manages to redraw.

YMMV, maybe it looks great like in Chrome, but it freezes for 5 seconds in IE.

Answer 2

Browsers will usually not update images while JavaScript code is running. If you need a counter to continue the animation while filling in the DOM, the population function will have to give the browser control several times per second to update the image, usually by setting a timeout (no delay or a very short delay), which returns to the population process and then comes back.

Unfortunately, this usually makes your population function a lot more complicated, as you need to keep track of how far you have in the population process in variables, rather than relying on loops and conditional structures to remember where you are are. In addition, it will run a little slower, depending on how you fill out the page structures, and if there is a click or other events that your application may receive halfway through the population, you may encounter unpleasant race conditions.

IMO, it would probably be better to stop the counter and then update the DOM. You still get a pause, but without spinning the spinner all the way, it will not be so noticeable. To enable the browser to update the counter after ajaxStop changed its src , use the zero-delay delay function in your AJAX callback function so that when the browser finishes, it will be able to display the changed counter before going into a long demographic code.

Making the population move faster is certainly worth it if the topic is slightly different. (Adding multiple DOM elements one after the other is essentially slower, since each operation has to spend more time flipping through list operations. Quickly adding many DOM elements immediately through DocumentFragment is quick, but getting all of these DOM elements in a fragment in the first place can there is no analysis of all innerHTML immediately, but generating HTML without holes in security is a nuisance, serializing and re-sorting through innerHTML+= slower and horrible IE / HTML5 insertAdjacentHTML fast but requires backups for many browsers: ideally fast range manipulation, returning to a slow node -by-node DOM calls for browsers without a range.Don't expect the jQuery append do this for you as slow as a node -by-node DOM operation, because that is exactly what he is doing.)

Answer 3

While manipulating the DOM on the fly is really tedious for a large number of browsers (especially for older ones), you can optimize what you do there as much as possible.

Also, another good idea is to make sure that you are using jQuery 1.4, which performs such operations much faster.

You can see the useful benchmark (1.3 vs 1.4) executed by the jQuery team, which illustrates this here:

http://jquery14.com/day-01/jquery-14