Array Contents Through a Loop?

Question

I'm trying to preload all of the images in an image gallery and found a nice, simple piece of code that does that (first code sample).

I want to try and make the gallery as dynamic as possible. Is there a way of looping through all of the images in the gallery so that all the images can be preloaded?

First is the code for preloading all the images for reference. Second is what I'm trying to work on.

// code for preloading images
var images = [
    'bigPics/1.jpg',
    'bigPics/2.jpg'
];

$(images).each(function() {
    var image = $('<img />').attr('src', this);
});

.

 // code I'm trying to re-work

    // this give me the number of images in the gallery
    var numberOfChildren = $(".thumb").length;

// then I want to loop through all of the images that make up the array as above and output???
    for (var i=0; i<numberOfChildren; i++)
      {
      var images = [ 'bigPics/' + i + '.jpg' ];
      }

    $(images).each(function() {
        var image = $('<img />').attr('src', this);
    });

Answer 1

How about...

$( '.thumb' ).each(function ( i ) {
    $( '<img>' ).attr( 'src', 'bigPics/' + i + '.jpg' );
});

Answer 2

I think you want to do something like is explained in this SO question: Javascript load background-image asynchrously