Question

Currently I am using jQuery fadeTO to fade in a div. However I have a minor issue of timing here. I have an Animated GIF file that I want to time with the jQuery fadeTO effect.

I have attempted to uses window.onload to not have the script fire until the page is fully loaded but while it technically works in that it does not fire the script until the page loads. Depending on the internet connection of the user this can have good timing or throw the timing off. I would like to time the effect with the GIF animation to have as precise as possible timing. Here is my current script I am using:

var $j = jQuery.noConflict();
   window.onload = function(){ 
    $j('#fadein').fadeTo(7500, 1, function() {
  });       
 };

My question is how do I have the script fire as soon as the GIF is fully loaded and showing on the screen? My thought is once the GIF is loaded and the script starts when the GIF does I can time the script with the GIF to fade in properly.

I am open to other thoughts as to how to time these better.

Answer 1

It is impossible to time JavaScript and animated GIFs reliably.

The only way to get anything close is to have the individual frames as separate images (or possibly as a sprite sheet if you can), and then animate the frames manually in JavaScript.

I actually have an example of this in action for a coursework site I made: link and the relevant JS file.