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

Question

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

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

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

Answer 1

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

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

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

比如：lazysizes。

• GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
• IntersectionObserver API | Can I use... Support tables for HTML5, CSS3, etc

Answer 2

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

Answer 3

猜测有两个可能：

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

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