Preloading Images not working

Question

I'm having an issue with my script.

I'm trying to load all the images in an array then check they are all loaded before continuing. But it's not working I equally do not get any errors so I'm not sure what is wrong.

This is what I have:

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback,  element){
            window.setTimeout(callback, 200 / 100);
          };
})();

function img_loader(){

for(var i in Images){
        Images[i]['img_src'].onload = function() {
            countImages ++;
        }
    }
}

function img_load_checker(){

    if(countImages == Images.length){
        return true;
    } else {
        requestAnimFrame( img_load_checker );   // keep checking
    }
}


window.countImages = 0;
img_loader();
    if(img_load_checker()){
            //this never gets executed - reason is unknown
    //continue with rest of the script
    }

This is the structure for console.log(Images);

[1: Object, 2: Object]
1: Object
img_src: <img>
2: Object
img_src: <img>

Can any one see the mistake?

When you say "it's not working" what do you mean specifically? — Aaron Kurtzhals, Dec 27 '12 at 21:31
Did you try debuggin your code? What did console say? What does JSLint say? — elclanrs, Dec 27 '12 at 21:32
`//continue with rest of the script` This part of the script never executes. — Sir, Dec 27 '12 at 21:32
Take a look [at my answer here](http://stackoverflow.com/a/9242332/451969). — Jared Farrish, Dec 27 '12 at 21:32

score 1 · Accepted Answer · answered Dec 27 '12 at 21:38

1

You if statement is NEVER going to work like that.

That funciton call is not going to magicaly sit there and wait until an asynchronous call is going to return.

if(img_load_checker()){
        //this never gets executed - reason is unknown
//continue with rest of the script
}

Use a call back!

for(var i in Images){
        Images[i]['img_src'].onload = function() {
            countImages ++;
            if (countImages == Images.length) {
                callSomeMethod();  <-- Call back
            }
        }
    }
}

or

function img_load_checker(){

    if(countImages == Images.length){
        callNextStep();
    } else {
        requestAnimFrame( img_load_checker );   // keep checking
    }
}
img_load_checker();

answered Dec 27 '12 at 21:38

epascarello

204,599
20
195
236

Does this mean i cannot just do `return true`? – Sir Dec 27 '12 at 21:42
Yes, the funciton is firing asynchronously. By the time it would return anything, that if statement was done executing a long time ago. – epascarello Dec 27 '12 at 21:43
Ah i see - strangely though on load never occurs. I put an alert test inside the on load function - wondering if it doesn't work when stored as objects. – Sir Dec 27 '12 at 21:45
Or you are setting the onload way to late and it never fires because it already did. – epascarello Dec 27 '12 at 21:54
Is there way to do `onload || is_already_loaded`? To cater to either situation ? – Sir Dec 27 '12 at 21:55
Check out this thread, selected answer talks about checking the parameters after the DOM has loaded. http://stackoverflow.com/questions/821516/browser-independent-way-to-detect-when-image-has-been-loaded – epascarello Dec 28 '12 at 14:21

score 0 · Answer 2 · answered Dec 27 '12 at 21:37

0

You don't need a timer:

Images[i]['img_src'].onload = function() {
    if(countImages++ >= Images.length)
    {
         loadingHasFinishedNowDoWhateverYouWant();
    }

}

answered Dec 27 '12 at 21:37

Nick Bray

1,953
12
18

Preloading Images not working

2 Answers2