Test if all images are loaded

image, image-loading, javascript, load

Solution

You need to define the onload function using a closure:

for (var i = 0; i < imgCount; i ++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src='img'+i+'.png'
    imgArr[i].onload = (function(i){
        return function(){ loadArr[i] = true }
    })(i);
}

Here's a jsFiddle which demonstrates this working in a similar scenario.

Also, note that the solution you've currently selected as the answer doesn't actually work:

imgArr[i].onload = (function() {
        loadArr[i] = true;
    })();

This function is evaluated immediately. This means that in the loop, each element of the loadArr is set to true as is the onload event. That code is functionally identical to:

imgArr[i].onload = loadArr[i] = true;

Problem

Here is my attempt at the ability to test if all images are loaded: ``` for (var i = 0; i < imgCount; i ++) { loadArr[i] = false imgArr[i] = new Image() imgArr[i].src='img'+i+'.png' imgArr[i].onload = function() { loadArr[i] = true //but wait! At the end of //the loop, i is imgCount //so this doesn't work. } } ``` The problem is that once the loop is done, the variable `i` is `imgCount`. That means all the other "loaded" flags never get set to `true` when their images are loaded. Is there some way to add a "loaded" property to an image, or is there some workaround to this problem?

Original source