Question

I have the following problem. I have three images in my index.html:

<div class = "someclass">
<img src = "1.jpg" title="jeeden"/>
<img src = "2.jpg" title="dwa"/>
<img src = "3.jpg" title="trzy"/>
</div>

I want them to load, and while loading – to push their titles to my array in jquery, here is the code:

var titletable = [];

$(document).ready(function() {

$("img").load(function(event){
titletable.push($(this).attr('atrybut1'));
});


$.each(titletable, function(i, v) {
$('.someclass').append("<li>" + i + ": " + v + "</li>");
}); 

When I’m moving $.each iteration into .load function, it shows the array elements, but in wrong way, it shows the state of array everytime the image is loaded. I want to display the contents of titletable when all three images will be loaded. How can I do this?

Answer 1

You ware running .each outside .load , and load usualy happens later

var titletable = [];

$(document).ready(function() {
   var totalImages = $("img").length;
   var loadedImages = 0;

   $("img").load(function(event){
       titletable .push($(this).attr('title'));
       loadedImages++; 

       if (loadedImages == totalImages)
           $.each(titletable, function(i, v) {
              $('.someclass').append("<li>" + i + ": " + v + "</li>");
           }); 
});

I keep the number of current loaded images, and when all images are loaded, I’m using the array.