开发者社区> 问答> 正文

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' //懒加载淡入
                })
            }

展开
收起
小旋风柴进 2016-05-30 14:27:21 2618 0
1 条回答
写回答
取消 提交回答
  •  $.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'
                    })
                }
    2019-07-17 19:20:33
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载