showProcessing gif not animating

[adamtomat]

Typically, when using an animated gif as a background image while processing is going on, the gif will not animate or animate very slowly. The solution is to use an image with the src as the gif. Have a look at appending / removing the image with js if showProcessing is set.

[Mottie]

Hi adamtomat!

Yeah, I added a note in the version 2.4 change log about that....

Note that for small tables, this processing icon may quickly flash and may be distracting. In larger tables, it will be more visible, but may not animate. I believe this is because of all the javascript processing going on (single threaded) prevents the animation from occurring - I'll try to find a better solution.

I haven't had time to figure out this issue. Any thoughts on it?

I'm not sure if it will make a difference when adding an img instead of the background image... but I'll check it out.

[adamtomat]

Yeah it sound like a silly solution, I experienced it on the project I am working on at the moment. Using AJAX to refresh a massive table. Originally had the div fade out to display the gif as a background image while it was processing. It never animated, or when it did it was very slow. I swapped it for an image and it worked straight away. Hope it works for this too.

If it works, and you implement it you may want to think about these 2 options:

1. If showProcessing is true, add the img on each heading when tableSorter is initialised, and set it as 'display:none'. this means more mark-up but means the gif is loaded before you need to use it.

2. If showProccessing is true, prepend / append the img to the heading on the start of processing then remove it after processing has finished. This will mean cleaner mark-up, but you run the risk of having to wait for the gif to load (atleast on the 1st instance, it should be cached after that)

[Mottie]

I added an img to the header and it didn't seem like it made any difference (see this demo). So, do me a favor and test the changes in these files for me on your table - I've only modified the blue theme css file:

http://dl.dropbox.com/u/1510510/testing/tablesorter/js/jquery.tablesorter.js
http://dl.dropbox.com/u/1510510/testing/tablesorter/css/theme.blue.css

I've added an option named processingIcon which contains the URL of the icon.

Thanks!

[adamtomat]

I'll have a play later tonight after work.

[Mottie]

Hi @adamtomat!

Any word on this? Did it work for you? I still haven't found a viable solution =(.

[Mottie]

So I have found a solution for the processing icon animation:

• Use CSS3 animations instead of an animated gif! Here is a demo.
• I have yet to incorporate it because it requires that all headers cells contain an inner div. And since it is possible to set the headerTemplate to an empty string to prevent modifying the cell, I thought it might be best to put this off until the next major release (Abelt); whenever I have time to work on it.