Time a jQuery fadeTo Effect?

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.

score 0 · Accepted Answer · answered Jul 09 '12 at 04:27

0

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.

answered Jul 09 '12 at 04:27

Niet the Dark Absol

320,036
81
464
592

I don't know why this answer was down-voted by anyone. It offers a valid point and proof of solution. – cereallarceny Jul 09 '12 at 04:34
I loved ur website . 'Completely different' :) Bad design + Awesome code :) – Jashwant Jul 09 '12 at 04:47
1

@Jashwant Well, it got me the highest grade in the class, so I guess the teacher didn't mind! – Niet the Dark Absol Jul 09 '12 at 05:03

score 0 · Answer 2 · answered Jul 09 '12 at 04:30

0

Here is an example of executing code after the image has loaded.

image=new Image();
image.src="mygif.gif"
image.onload=function(){
    alert('image Loaded');
}

answered Jul 09 '12 at 04:30

Adam Fowler

1,750
1
17
18

There is quite a big difference between loading the image, and the animation finishing. For instance, imagine an "animation" with three frames, each lasting 20 seconds. It would only take a short time to load the image, but a whole minute to play the animation. – Niet the Dark Absol Jul 09 '12 at 04:34
Yes but luckily we know how long the animation takes, and we can use jquery's delay function. – Adam Fowler Jul 09 '12 at 04:39
@Kolink - It is as Adam said. I know the length of the animation and can time it close enough for my purposes as long as it does not fire until the GIF is loaded. I do not need exact timing just closer than what I was getting before. – L84 Jul 09 '12 at 04:41
@AdamSack The trouble is, though, that you are relying on realtime execution. For one thing, some browsers (including IE and many mobile browsers) limit the speed of animated GIFs, or may even disable the animation completely. Additionally, the animation may be slowed by a lagging internet connection or busy CPU. There are just too many variables, which is why the solution I put forward is a better choice: it eliminates every last variable. – Niet the Dark Absol Jul 09 '12 at 04:47

Time a jQuery fadeTo Effect?

2 Answers2