• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Progress GIF Just Displays but No Animation

 
Steve Dyke
Ranch Hand
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65123
91
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Steve Dyke
Ranch Hand
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Vikas Kapoor
Ranch Hand
Posts: 1374
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Vikas Kapoor
Ranch Hand
Posts: 1374
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Steve Dyke
Ranch Hand
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Steve Dyke
Ranch Hand
Posts: 1643
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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:


 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic