progress indicator + ie slowness

Hello,

I have a script that is using javascript to hide and show large numbers of table cells depending on selected options. The process seems to be cpu intensive and takes up to 10 seconds to complete so I am trying to indicate that something is actually happening to the user but I'm having several problems.

Lets say i do this..

onclick="progressimageon(); processshowhide; progressimagesoff();"

Code (markup):

What I wanted is progressimageon to place my animated gif on the screen, then processshowhide executes taking 10 seconds, then progressimageoff to hide the progress image. But what actually happens is it doesn't update anything until all the processing has finished so you never see the anim gif. The individual functions work ok when run alone.

If I can get that working I have the problem that animated gifs seem to halt while cpu heavy javascript is running. Is there any way around that?

One other problem, this script takes around 10 seconds in ie7 but completes in around 1 second in firefox and safari. Is there any reason ie is so slow? Basically the bulk of the scripts load is several loops that use document.getElementById(\"0readmoreblock\" + cc).style.display=isin; to display/hide a large number of table cells.

Any insights would be greatly apreciated.

 

Chain the call to the functions. Put the call to processshowhide(); as the LAST LINE in progressimageon(), and put the call to progressimagesoff(); as the LAST LINE in processshowhide();

Then just:

onclick="progressimageon()"

 

Thanks for the reply Mike. I have done what you suggested but I am still getting the same behaviour. Nothing is updated on the screen until everything is finished processing so the progress image never shows. If I remove the call to progressimageoff as a test then the progress image is loaded but only after processshowhide has completed.

 

Basically the bulk of the scripts load is several loops that use document.getElementById(\"0readmoreblock\" + cc).style.display=isin; to display/hide a large number of table cells.

Why can't you put the call to progressimageon() at the beginning of your loop code and call progressimagesoff() when exiting the loop:

onclick="unHideManyTableCells()"

Code (markup):

function unHideManyTableCells(){

          progressimageon();
          for (i=0; i<someArray.length; i++)
                        {
                          document.getElementById(\"0readmoreblock\" + cc).style.display=isin;
                        }
          progressimageoff();
}

Code (markup):

 

That's what I did to start with, pretty much as per your code. Everything was within one function and it was doing the same thing. I seperated it into seperate functions and tried calling them seperately to try and figure out why it was doing what it was doing.

 

Is any of this AJAX code?

If so, you might try setting it to be "synchronous" instead of asynronous.

Change the true to false:

AdminRequest.open("GET", "Admin.xml"+forceGET, true);

Code (markup):

Otherwise, I haven't a clue. In the example I posted above, the loop will not start until execution of the progressimageon(); function is complete.

 

No ajax, just javascript. I'll have to play around more to see if I've done something stupid.

Thanks for your time Mike

 

Okay, well, maybe there's a conflict with the JS that sets the display style.

You might just try something like this, just to experiment.

function init(){

          progressimageon();
          setTimeout("progressimageoff()", 5000);

}

Code (markup):

Let the image come on, then 5 seconds later, turn it off. If that works, then you know the problem must be somewhere in that loop code.

 

I tried your code above and it works as you would expect. Image appears them disappears after 5 seconds.

I tried something similar

progressimageon();
unHideManyTableCells();
setTimeout("progressimageoff()", 10000);

What happens is no image appears, unhidetablecells finishes processing after around 5-6 seconds heavy cpu usage and then the image appears. Then at 10 seconds progressimageoff hides the image.

Still experimenting...

 

I does sound like there's a JS conflict in progressimageon() and
unHideManyTableCells(). Something in unHideManyTableCells() is calling the progress image ID, and setting it to display:none. That's my best guess. But, 10 seconds does sound like a long time to hide table cells. Do you know that ID's must be unique, names can be the same, but not ID's. If you are using names for the table cells, I'd just get rid of them, you don't need them, so delete something that may be causing a conflict, or delay in IE, and use ID's only for the table cells.

 

I've checked through those functions and there is nothing that I can see that should cause a conflict. All the table cells are using individual ids, no names.

I've managed to get around the problem though. Everything was previously called by a onclick event. I've seperated it so now it goes..

<span onmousedown='progressimageon();' onclick='unhidemanytablecells(); processimageoff();'>click</span>

I'm not sure why that works but it does. The only problem I have now is that as I suspected, the browser stops the animated progress.GIF from animating while it processes unhidemanytablecells so I get a static image instead, so I'm going with changing the mouse cursor as an indicator instead.

I've managed to optimize the code so it's like 3 seconds instead of 6 but ie is still definitely noticably slower than firefox or safari which are almost instant. On a slow pc its even worse.

Anyhow, I have something workable now.

Thanks again Mike.