开发者社区> 问答> 正文

ajax+lazyload.js,如何只让新加载出来的元素lazyload呢?

小旋风柴进 2016-05-30 14:27:21 1071

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

但是有一个问题,就是每当加载出新图片之后,因为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' //懒加载淡入
                })
            }
前端开发
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:20:33
     $.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>';
                    var $el = $(str);
                    //新图追加到列表中
                    $('#list_pubu').append($e);
                    // 限定 新的 `img.lazy` 元素才 `lazyload`
                    $("img.lazy", $e).lazyload({
                        effect:'fadeIn'
                    })
                }
    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程