Dynamically add images jquery

Question

I have an array of images and then I iterate through each using $.each but I can't get the images to show on the page, it ends up with nothing getting showed.

<ul id="imagesList">
  <li>No images found</li>
</ul>

$(function(){
            //load image array
            var images = {'image1':'assets/img/linkedin_30px.png','image2':'assets/img/twitter_30px.png'};
            $.each(images, function(){
               $('#imagesList').appendTo('<li>' + this + '</li>'); 
            });
        });

Solution

You are using appendTo instead of append. Use append:

$.each(images, function(){
    $('#imagesList').append('<li><img src="' + this + '" /></li>'); 
});

Or, if you insist on using appendTo:

$.each(images, function(){
    $('<li><img src="' + this + '" /></li>').appendTo('#imagesList'); 
});

If you want to show a loader while the image is loading, use this:

var $list = $('#imagesList');

$.each(images, function(i, src) {
    var $li = $('<li class="loading">').appendTo($list);

    $('<img>').appendTo($li).one('load', function() {
        $li.removeClass('loading');
    }).attr('src', src);
});

Here's the fiddle: http://jsfiddle.net/fyar1u7a/1/

Comments

[Pandy]

duh! using it the other way arround. I feel stupid haha, thanks!

[KAD]

@JosephSilber is there a way to add loader to these loaded images?

[KAD]

@JosephSilber thanks, will check it out I have made a workaround though .. greencool.co/green_cool_final/products