Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts

    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

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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


  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm only guessing. Hence the question mark.
    But it makes sense to me.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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++" />

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you checking for complete?

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

    Or perhaps checking for the file size?

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Willy

    Please put a big smile on your face

    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

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I get lucky every now then
    Glad I could help

    .....Willy


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •