Question

i have a problem while incrementing a variable and adding new data to array in the jquery load function. I think that incremention and array manipulation is done when all images are loaded. But I need to use imgCount variable futher in the code. So could you give me the solution? Sorry for my bad english )))

var imgObject = $('#temp_img img'); // dinamicaly loaded images 

var readyImages = [];
var imgCount = 0;

$(imgObject).bind("load", function() {

    if (this.width > 200 && this.height > 200) {

        readyImages.push(this.src);
        imgCount++;
    }

});

alert(imgCount) // returns 0, though must return 3

Answer 1

The callback you define will run asynchronously, while the alert statement will be run immediately. What you would need to do is first count the number of images found, then trigger some functionality when all of them are loaded. Something like:

var imgObject = $(‘#temp_img img’);
var imgCount = imgObject.length – 1;
var imgLoadedCnt = 0;
var readyImages = [];
$(imgObject).bind(“load”, function() {

if (this.width > 200 && this.height > 200) {
    readyImages.push(this.src);\
    imgLoadedCnt ++;
    if (imgLoadedCnt == imgCount) {
        someFnToRunOnLoaded();
    }
}

});