Welcome to WebmasterWorld Guest from 22.214.171.124
Forum Moderators: open
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.
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).
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.
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.
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.
The API lives here.
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.