动态添加图像jquery

Question

我有一个图像数组,然后我使用$ .each迭代每个图像,但我无法在页面上显示图像,最终没有显示任何内容.

<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>'); 
            });
        });

Answer 1

你正在使用appendTo而不是append.用途append:

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

或者,如果您坚持使用appendTo:

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

如果要在加载图像时显示加载程序,请使用以下命令:

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);
});

这是小提琴:http://jsfiddle.net/fyar1u7a/1/