动态添加图片的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>'); 
            });
        });

- Tsundoku

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/

- Joseph Silber

---

嘿！我用错了它。感觉有点傻哈哈，谢谢！ - Tsundoku

@JosephSilber 有没有办法为这些加载的图片添加加载器？ - KAD

@JosephSilber 谢谢，我会去看一下。不过我已经想出了一个解决方法.. http://greencool.co/green_cool_final/products/ - KAD

Answer 2

你的appendTo函数有一些问题。你使用它的方式不正确。

请尝试以下代码...

<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(){
               $('<li>' + this + '</li>').appendTo('#imagesList'); 
            });
        });

- Pavan Agarwal