交叉点观察者无法处理通过 JS 添加的元素答案

【问题标题】：Intersection observer not working on elements added through JS交叉点观察者无法处理通过 JS 添加的元素
【发布时间】：2019-11-12 06:55:03
【问题描述】：

我做了一个汽车经销商页面。我将有关汽车的数据存储在对象数组中，然后循环遍历它以将数据插入到我的 HTML 文件中以显示在页面上。它工作正常。

当我尝试使用交叉点观察器添加延迟加载函数时出现问题。这些东西被正确放入页面，但交叉点观察者看不到图像，也没有加载它们。

这里是代码笔 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">

【问题讨论】：

【解决方案1】：

你的主要代码没问题。

唯一的问题是它在错误的时间运行。当您在 DOMContentLoaded 上运行 DOM 生成代码时，您尝试立即附加观察者，因此 DOM 中还没有图像。

您还需要将您的观察者代码放在DOMContentLoaded 中，或者创建一个方法并从那里调用它。

（你的 codepen 也会失败，因为你使用了 jquery 插件而不包含 jQuery 库）

【讨论】：