Preload Images And Insert Into DOM

Hi I have a question about preloading images either in JS or jQuery. What I have is one image which I basically want to be repeated 16 times in a

image here

Solution 1:

After you cache your image (using the code http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript/) you simple run a javascript loop:

for (i=0; i<16; i++) {
  $('ul#your_ul_id').append('<li><img src="your_image_url"/></li>');
}

Solution 2:

I would trigger a .load() event for the original image and only then clone the DOM:

$(document).ready(function() {
var img = $('<img id="yourImg">'); 
img.load(function() {
// repeat this step ad libitum
$(this).clone().appendTo(whatever)
});
img.attr('src', yourURL);
img.appendTo(whatever2);
});

Solution 3:

var img = new Image();
img.onload = function() {
  $("li").prepend( this );
};
img.src = 'http://placehold.it/40x40/cf5';