滚动翻页时，js添加的img为什么懒加载失败？-灵析社区
CTang滚动翻页时，js添加的img为什么懒加载失败？ 页面中，滚动翻页时，js添加的img为什么懒加载失败，图片不显示，如果能显示 懒加载用的是zepto+下面的代码 [https://github.com/maplejan/jquery_lazyload/blob/1.8.5/jquery.lazyload.js](https://link.segmentfault.com/?enc=iUzKKFeweDe9cSUeP2Mu7A%3D%3D.ahBcfs0TrFNKWRGmaXljSi1DEAxyFwTuf%2B%2BrV%2BG01h6UttrYWdOmYL2FGvBir1dHw2LNV1bQM2EeItwIvcRFultaJf66yZ5dXuXvssIYgi0%3D) 首页正常加载hmtl中的图片，能通过懒加载实现，翻页js添加dom部分内容没问题，就是当内容进入可视区不能实现图片懒加载
无敌英俊大师兄不建议使用这个包，这个包已经很久没有维护了，其使用的方案也过于老套(向前兼容更强)，其使用方案为在一开始的时候就选择了所有图片，并将图片所在位置信息
top/left 记录到了内存，然后监听 scroll 事件，当滚动的距离命中后就开始加载图片。
如果页面上存在 CLS(布局偏移)时就会导致滚动到了位置，却不进行加载图片的情况。
还有在配合 Swiper 使用时也会存在图片不加载。
以及部分情况下，图片处于 display: none ，后又 display: block
的时候，也会造成图片滚动到了实际位置不显示，或者需要滚动过头后才显示。
现在更推荐使用基于 "Intersection
Observer" (https://link.segmentfault.com/?enc=1%2BC%2Fzh0oUAn8f0xpZe55Og%3D%3D.DsRoKXh6SI33gQ3b%2F0%2FHihkI%2FjOmrBw3xXGJYZc1G3yeGk99GenazbqrNHpuzFH7KJUvey20d1CCTDv1MebDZizMImnSk2KTljrEyiXHhk4%3D)
的懒加载包，这个会更加准确。且性能也更好。
比如："lazysizes" (https://link.segmentfault.com/?enc=Rbbm4FNl008sSPKTkT8Xzg%3D%3D.ULJKUgt281iV6uZgLHffFomaXB9JClWHc3MhtjHJkEObtf4wYKbwbfo1sVS3OtdA)。
"image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/0abf84ddb886839673966abfcf11de21.png)
* "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." (https://link.segmentfault.com/?enc=RZR%2B3AIKUG%2BJPjjn56TL%2Fw%3D%3D.4M8isgHkRDrsoZSgL5wzcZRd2MxN9gKJTaKZ%2F9%2BsXAIXEcIVvckKr%2Fs5W%2FgumH8%2B)
* "IntersectionObserver API | Can I use... Support tables for HTML5, CSS3, etc" (https://link.segmentfault.com/?enc=V39HMsExhgdWzYDA6AS3OQ%3D%3D.kPzH0Euruja45Sn5vAtG0LOXfKwl6nsNwRB4lO6TvxCI4%2FnQcf0NHvC4g3xnCMSnHJ7tltw62QHAaPByuNGE9Q%3D%3D)