滚动翻页时,js添加的img为什么懒加载失败?

滚动翻页时,js添加的img为什么懒加载失败?

页面中,滚动翻页时,js添加的img为什么懒加载失败,图片不显示,如果能显示
懒加载用的是zepto+下面的代码
https://github.com/maplejan/jquery_lazyload/blob/1.8.5/jquery.lazyload.js

首页正常加载hmtl中的图片,能通过懒加载实现,翻页js添加dom部分内容没问题,就是当内容进入可视区不能实现图片懒加载

阅读 466
3 个回答
✓ 已被采纳

不建议使用这个包,这个包已经很久没有维护了,其使用的方案也过于老套(向前兼容更强),其使用方案为在一开始的时候就选择了所有图片,并将图片所在位置信息 top/left 记录到了内存,然后监听 scroll 事件,当滚动的距离命中后就开始加载图片。

如果页面上存在 CLS(布局偏移)时就会导致滚动到了位置,却不进行加载图片的情况。
还有在配合 Swiper 使用时也会存在图片不加载。
以及部分情况下,图片处于 display: none ,后又 display: block 的时候,也会造成图片滚动到了实际位置不显示,或者需要滚动过头后才显示。

现在更推荐使用基于 Intersection Observer 的懒加载包,这个会更加准确。且性能也更好。

比如:lazysizes

image.png

请给出你使用的插件,效果,与相关代码

猜测有两个可能:

  1. 懒加载初始化的时候,还没有图片,所以后面也不会处理这个图片
  2. 图片 DOM 创建时,所属内容区块已经处理过了,所以不会处理

建议想清楚懒加载的原理,然后从可能的节点入手,找到问题,解决问题。

推荐问题
宣传栏