Progress Bar / Animated Gif Stalling

Want to display an animated gif or a dynamic message while loading

[CDNQuilter]

I have some javascript that creates very large nested tables to display a large amount of data. (Yes, this situation does require the nested tables.)

The process is noticeably slower in IE than FF or Opera so I want to display something dynamic while the tables are being created.

I have tried both an animated gif and a marquee-type "...Loading..." message using setInterval or repeatedly issuing setTimeout calls.

Both the gif and the marquee work just fine stand alone.

My problem is that the processing that is creating the tables seems to take processing priority so that the animated gif just stalls or the moving message stops moving.

I was setting the gif/calling the marquee function from within the same function I was using to create the tables.

So I tried separating the functions, calling the gif/marquee using onMouseDown= and starting the table functions from onMouseUp=. In the fraction of a second between the two, the gif/marquee moves and then stalls just as before.

The two are writing to different parts of the page.

The part of the page containing the large table is hidden until the processing is complete.

When the processing is complete, I then blank out gif or call clearTimeout and blank out the message. That part works just fine.

What is the secret to getting the animated gif or marquee message to keep moving?

I found a script that displays an animated gif while loading a larger image but I cannot figure out how it keeps the animation going as it uses a very object-oriented style and I cannot figure out how it is keeping things separate.

Thanks
jck

[WesleyC]

I don't have personal experience with this, but perhaps setting a timeout in your processing script will help?

I'm assuming you have function(s) that are called repeatedly and often--try setting a timeout to execute these functions in 1 millisecond instead of executing them immediately. This should allow the browser a "break" in which to update the image animations (though it will make your script slower).

[CDNQuilter]

Thanks Wes
In years gone by I wrote progress bars in basic in which I embedded the output inside frequently called routines. However, browsers save their output so this didn't work.
My problem here seems to relate to tables.
It seems that once the browser starts to render my large table, no other output occurs until that is done.
Javascript timeouts are not like sleep functions that suspend processing so something else can happen. Plus, I don't want to make the script any slower than it already is.
What I have as a work around for now is a pop up in which I display the animated gif and "...loading tables... then the script closes the pop up when it is done. In FF and Opera, on my machine, this pop up doesn't have time to render completely so it looks a bit weird...oh well.
Perhaps I will use an Ajax approach and try building the tables in php instead.

[Demaestro]

CDNQuilter,

Question, does all the data need to load at time of page hit?

The reason I ask is I was in a similar situation a while ago and what we came up with was areas of data that were "click to load"

So we would load the "meat and potatoes" into the page and areas where nested data would load would have links that said things like "See more..." "Load Countries..." "Get Data"

Clicking these would start a new Ajax hit that would load the applied data. It worked out quite well and it is easy to use.

I do it all the time for edit forms... like I won't load the province/state drop down box unless they click to load.

Something to consider.

[CDNQuilter]

You're a mind reader Demaestro.

The page is click to load and I am trying to display the animated gif after the user clicks and while they are waiting.

When the page first loads, the 3 portions with these large tables has display: none; and each section is preceeded with a 'click to show content' link.
When the link is clicked, the js does the following:
- build tables using hidden data
- change style to display: block;
- changes link to 'click to hide'
Only the first show is slow as thereafter, because the tables are already there, the js does not have to run.

I am thinking that it may be faster to build the tables client side. Even though it downloads more, I know that the server is fast whereas user's computers can be all over the place. Folks who have slow internet connections are used to waiting for pages to load so perhaps this is where the time lag should be.

[Demaestro]

It sounds like you are on the right track but need a better implementation.

Are you using a common JS library? I use YUI for a lot of stuff but I have been using Spry more and more. The main distinction to be made between Spry and YUI is that YUI is made for developers, which is great but there is a lot of overhead learning. Spry is made for designers so things tend to look a little "prettier" out of the box and Spry also seems to have a performance edge when it comes to filling tables with data using JS.

I suggest you check this out.
[labs.adobe.com...]

The API lives here.
[labs.adobe.com...]

From Spry you will need to use "Spry Data Sets" & "Spry Region"

I find the methods to be quite fast and easy to use.

If you need examples or have more questions please ask. It sucks to do but sometimes making a whole new version from scratch is easier then renovating bloated code.