Test if all images are loaded

Question

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         


        

Answer 1

This is why closures were made! Your loop runs almost instantly, and it ends long before the first image is loaded. So i==imgCount right away, "skipping" all other values. Closures can avoid this and affect each value of i to a distinct image.

However in your case, I would indeed add a "loaded" attribute to each image.

// Construct your image array
for (var i = 0; i < imgCount; i++) {
    imgArr[i] = new Image();
    imgArr[i].src='img'+i+'.png';
}

//Then iterate over the array, adding a 'loaded' attribute when it occurs
imgArr.each(function(){
    $(this).onload(function() {
        $(this).attr('loaded','true');
    });
}