交叉口观察器不处理通过 JS 添加的元素
Intersection observer not working on elements added through JS
我做了一个汽车经销商页面。我将有关汽车的数据存储在一个对象数组中，然后遍历它以将数据插入到我的 HTML 文件中以显示在页面上。它工作正常。
当我尝试使用交集观察器添加延迟加载函数时出现问题。这些东西正确地放入了页面，但是交叉点观察者看不到图像并且没有加载它们。
这里有一个 link 到代码笔 https://codepen.io/russiandobby/pen/xxxJvxv?editors=0010 ，如果你把 data-src 改成 src 就可以了。
如何让它工作才能延迟加载。
<img data-src="${car.img}" alt="jag1" class="card-img-top car-img popup-img">
你的主代码没问题。
唯一的问题是它在错误的时间运行。当您 DOM 生成代码在 DOMContentLoaded 上运行时，您尝试立即附加观察者，因此 DOM 中还没有图像。
您还需要将观察者代码放在 DOMContentLoaded 中，或者创建一个方法并从那里调用它。
更新代码：https://codepen.io/gpetrioli/pen/XWWBvQm?editors=0010
(你的 codepen 也会失败，因为你使用 jquery 插件而不包含 jQuery 库 )
我做了一个汽车经销商页面。我将有关汽车的数据存储在一个对象数组中，然后遍历它以将数据插入到我的 HTML 文件中以显示在页面上。它工作正常。
当我尝试使用交集观察器添加延迟加载函数时出现问题。这些东西正确地放入了页面，但是交叉点观察者看不到图像并且没有加载它们。
这里有一个 link 到代码笔 https://codepen.io/russiandobby/pen/xxxJvxv?editors=0010 ，如果你把 data-src 改成 src 就可以了。
如何让它工作才能延迟加载。
<img data-src="${car.img}" alt="jag1" class="card-img-top car-img popup-img">
你的主代码没问题。
唯一的问题是它在错误的时间运行。当您 DOM 生成代码在 DOMContentLoaded 上运行时，您尝试立即附加观察者，因此 DOM 中还没有图像。
您还需要将观察者代码放在 DOMContentLoaded 中，或者创建一个方法并从那里调用它。
更新代码：https://codepen.io/gpetrioli/pen/XWWBvQm?editors=0010
(你的 codepen 也会失败，因为你使用 jquery 插件而不包含 jQuery 库 )