javascript - ajax+lazyload.js，如何只让新加载出来的元素lazyload呢？

Question

现在在做一个滚动无限加载+图片淡入懒加载的图片列表效果，基本上效果是实现了，

但是有一个问题，就是每当加载出新图片之后，因为ajax成功返回数据后为了让新图片有懒加载效果，所以又执行了一次懒加载（如下代码），但这样却导致之前的旧图片（全部class="lazy"的图片）也重新执行了一次lazyload，致使现在每加载一次新数据，页面中的全部图片都淡入闪现一次，每加载一次就全都闪一次，体验很不好啊……

有没有什么解决办法呢？

    $.ajax({
        url:"__APP__/Goods/getMore",
        type:"post",
        data:dataString,
        async:false,
        dataType:"json",
        success:function(msg){
                var str ='<p class="item"><img class="ease-3 lazy" src="images/alpha.gif" src="images/'+msg.mainPicture+'"/></p>';
                //新图追加到列表中
                $('#list_pubu').append(str);
                $("img.lazy").lazyload({
                    effect:'fadeIn' //懒加载淡入
                })
            }
    })

Answer 1

每次加载后给图片添加一个class，名称任意，用来标记这些图片已经加载过了。添加属性也行。这样就可以用:not()选择器来选择未加载的图片了。

Answer 2

    $.ajax({
        url:"__APP__/Goods/getMore",
        type:"post",
        data:dataString,
        async:false,
        dataType:"json",
        success:function(msg){
                var str ='<p class="item"><img class="ease-3 lazy" src="images/alpha.gif" src="images/'+msg.mainPicture+'"/></p>';
                var $el = $(str);
                //新图追加到列表中
                $('#list_pubu').append($e);
                // 限定 新的 `img.lazy` 元素才 `lazyload`
                $("img.lazy", $e).lazyload({
                    effect:'fadeIn'
                })
            }
    })