javascript - ajax+lazyload.js,如何只让新加载出来的元素lazyload呢?
PHP中文网
PHP中文网 2017-04-10 17:13:28
0
2
289

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

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

有没有什么解决办法呢?

$.ajax({ url:"__APP__/Goods/getMore", type:"post", data:dataString, async:false, dataType:"json", success:function(msg){ var str ='

'; //新图追加到列表中 $('#list_pubu').append(str); $("img.lazy").lazyload({ effect:'fadeIn' //懒加载淡入 }) } })
PHP中文网
PHP中文网

认证高级PHP讲师

全部回覆 (2)
迷茫

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

    小葫芦
    $.ajax({ url:"__APP__/Goods/getMore", type:"post", data:dataString, async:false, dataType:"json", success:function(msg){ var str ='

    '; var $el = $(str); //新图追加到列表中 $('#list_pubu').append($e); // 限定 新的 `img.lazy` 元素才 `lazyload` $("img.lazy", $e).lazyload({ effect:'fadeIn' }) } })
      最新下載
      更多>
      網站特效
      網站源碼
      網站素材
      前端模板
      關於我們 免責聲明 Sitemap
      PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!