Progress GIF Just Displays but No Animation

When a user clicks on a tab in my app to retreive remote data and repopulate a table on the page using JSP nad a DIV tag I display a table row in another DIV tag that contains a GIF image(a roller progress gif). However, the GIF does no animation. When the table is loaded the table row containing the GIF is hidden. How can I make sure the GIF animates when the data is retreived and the table is loaded?

Sounds like there is something happening on the page that is locking up the browser.

Either can be a synchronous Ajax call or the for loop that is building the table.

Make sure that the image is fully loaded before displaying it.

Eric

How are you retrieving the data? Ajax or a form submit? If the latter, browsers will generally not run animations while waiting to load the next page.

Bear Bibeault wrote:How are you retrieving the data? Ajax or a form submit? If the latter, browsers will generally not run animations while waiting to load the next page.

I am still having an issue with this. I am using jQuery.load with a callback.

From a hyperlink I call a js function.
This function is supposed to load a DIV with a JSP that has a progress gif. This load has a callback.

This callback fires another jQuery.load to load a second DIV with a JSP.

It is like the first jQuery.load is skipped.

Eric Pascarello wrote:Make sure that the image is fully loaded before displaying it.

Generally, this kind of processing images are part of WAR file. so what do you mean by fully loaded?

We are also facing the same issue in our project . We are also using jQuery with Async call.

What actually happens is the GIF gets loaded properly, it does the animation but that animation stops-starts-stops-starts like this. It should be smooth animation like you have opened the GIF in some image viewer.

Vikas Kapoor wrote:We are also facing the same issue in our project . We are also using jQuery with Async call.

What actually happens is the GIF gets loaded properly, it does the animation but that animation stops-starts-stops-starts like this. It should be smooth animation like you have opened the GIF in some image viewer.

The problem is that some other processing on the computer is stealing the CPU and is hanging the browser. That means you have loops or updates [appendChild, innerHTML, etc] that causes the browser to have to "lock up".

Eric

Bear Bibeault wrote:How are you retrieving the data? Ajax or a form submit? If the latter, browsers will generally not run animations while waiting to load the next page.

I am using jQuery.load() with callback.

I was under the impression from reading the documentation that the AJAX calls ran in the background. If so shouldn't the browser be processing the image while AJAX is retreiving its data?

I really need some way to let the user know the app is processing their request and not hung up.

If the load is adding a lot of data to the page, it might be locking up the browser.

What does your code look like? How are you showing the image? Show code, get better results [you should know this by now]

Eric

Eric Pascarello wrote:If the load is adding a lot of data to the page, it might be locking up the browser.

What does your code look like? How are you showing the image? Show code, get better results [you should know this by now]

Eric

This is my JSP:

This is my external js:

ProgressRowServlet code:

ProgressRowForm code:

document ready does not wait for images to load so there is one issue. Also you are doing tons of loads so that is probably doing a number on performance with the redraws when the innerHTML is changed.

Guessing you have reasons of doing it this way and not on the server. Seems strange.

Eric