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

问题描述

问 题

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

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

有没有什么解决办法呢？

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

解决方案

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

这篇关于javascript - ajax+lazyload.js，如何只让新加载出来的元素lazyload呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！