Question

Is it possible to load images from an array in jQuery?

The array looks like: var imgNames = ['images/image01.jpg, images/image02.jpg, images/image03.jpg']

And I want it to create the following inside a parent element:

<div id="imgNames">
  <img src="images/image01.jpg">
  <img src="images/image02.jpg">
  <img src="images/image03.jpg">
</div>

I’ve tried the following:

preload = function() {
    this.each(function(){
        $('<img/>')[0].src = imgNames;
    });
}
  var imgNames = ['images/image01.jpg, images/image02.jpg, images/image03.jpg'];
    $(document).ready(function(){
   // Preload Images:
preload();

});

which I found online, but I think it’s tailored to replace existing elements – not creating them.

Answer 1

Assuming an existing div:

<div id="imgNames"></div>

Then you can loop through the array as follows:

var imgNames = ['images/image01.jpg', 'images/image02.jpg', 'images/image03.jpg'];

$(document).ready(function() {
    var $div = $("#imgNames");

    $.each(imgNames, function(i, val) {
        $("<img />").attr("src", val).appendTo($div);
    });
});

Note: As per Krister’s comment above, your array has one element that is a string containing all three image names. I’ve assumed you intended it to contain three strings each with one filename.