Preloading conundrum

I have written an Image Preloader script which consists of two functions.

Function one is called and preloads the first image, when the image has loaded a second function is called to check for more images in the array, if there is another image then function one is called to preload it.

This is the basic cycle of the script and have implemented this in some scripts where I need to prevent functions from being run until all necessary images have been preloaded.

Everything works fine but....

In a recent script I found that the preloading functions started to behave in an erratic manner in the preloading sequence.

For example, 20 images would normally load from number 1 to 20, but I was getting something like 1, 2, 3, 7, 9, 10, 15, 19, 20, and when the function should have stopped I found that after a few seconds the second function would continue starting and stopping showing additional numbers such as 23, 24, 27, 35 even though there was not this many images and the function was not being called from anywhere.

I was racking my brains because this should not be happening because the function was not being called at that stage, I checked my other scripts and all was ok.

Then I saw that the only difference with this latest script was the fact that I was preloading some animated gifs.

I took them out of the array and the preloader worked fine yet when I put them back in the script went haywire again.

I was just wondering if anyone could give me some sort of explanation as to why the animate gifs screw up my preloading

Because a gif can have 23, 24, 27, 35 frames and your script is incrementing the counter and firing the other function on the complete loading of each frame?

Thanks Willy.

I thought it might have something to do with an animated gif being composed of more than 1 image but I thought I'd pose the question just to make sure that I wasn't going out of my mind

:thumbsup:

I'm only guessing. Hence the question mark.
But it makes sense to me. ;)

Try this with an animated gif and you'll confirm that the img onload event is fired as each frame in the animated gif is loaded.

var img = new Image();
img.onload = function() {window.status++;}
img.src = 'animated.gif';

or:

<img src="animated.gif" onload="window.status++" />

Hello glenngv

I have tried out both the examples the results of which showed that the window.status++ was incrementing repeatedly.

At first I thought it was counting the number of frames in the animated gif, I checked and found the gif I was using had 4 frames but the counter proceeded well past this, in fact it just kept going.

I also noticed that the count was incremented at regular intervals of 11 seconds and checked the running time of the gif and found this too was 11 seconds.

So the conclusion is that the onload was firing everytime the animated gif began its animation.

This was the case with both examples.

The question now is, is there a way round this?

Thank you glenngv and Willy

Are you checking for complete?

var myImage = new Image();
myImage.src = "fourFrame.gif"
if(myImage.complete){
increment++;
}

Or perhaps checking for the file size?

Willy

Please put a big smile on your face :thumbsup:

When you mentioned myImage.complete I thought to myself "self" what is this complete business.

So I dug out my Javascript book and looked it up.

Image.complete
The complete property of the Image object is a boolean value that specifies if an image has finished loading

I made a small modification to my preloader script and found that the animated gifs preloaded without any of the problems that I had previously experienced.

Once again I thank you both :D

I get lucky every now then :D
Glad I could help :thumbsup:

.....Willy