问题标签 [intersection-observer]

我有这段代码用于延迟加载图像：

https://jsfiddle.net/uf9Ldptw/

我使用 Intersection Obeserver，因为我构建了一个只需要与最新版本的 Chrome 和 Firefox 兼容的内部工具。我不需要任何 Safari 或 IE 支持，所以我没有研究 polyfill。

这段代码在 Chrome 中完全符合我的要求，但在 Firefox 中它根本不起作用。我没有收到任何错误，并且从 Firefox 55 开始支持文档 Intersection Obeserver，而我目前在 63 上。

我在那里想念什么？

我正在使用交叉点观察器升级延迟加载滚动机制。我的滚动机制如下所示：

无需过多关注杂草，isInViewport使用提供的偏移量和提供getClientBoundRect的元素的 来确定元素是否在考虑偏移量的视口附近。本质上，这个元素是否400px来自视口？该方法display只是显示元素。

现在使用交叉点观察器我有这个：

我正在使用相同的isInViewport方法和display使用偏移量的方法，但是在观察者触发之前，偏移量不会触发。观察者当然是由它的阈值触发的。我无法提供理想的负阈值。我尝试使用documentElement作为我的选项，root然后提供一个rootMargin. ${(el.offsetTop - offset)}px 0px 0px 0px那是一个字符串模板，但是这里的格式被打勾了。

我可以实现与滚动侦听器相同的偏移逻辑，但可以观察到交叉点吗？如果您有任何问题，请告诉我。

我对IntersectionObserver API很陌生，我一直在试验这段代码：

这似乎可以正常工作，并且在元素进入视口callback()时被调用，但在页面最初加载时也会触发一次，这会触发 `console.log('observer trigger.');.lazy-loadcallback()

页面加载时是否有理由触发此回调？或者我如何实施这个有错误？

编辑：将代码更改为以下代码仍会在页面加载时触发回调。

有没有办法使用 Intersection Observers 检测元素是否离开视口？例如，我在屏幕上有一个元素，我想在元素顶部到达视口顶部时触发回调。来自 MDN：

Intersection Observer API 让代码注册一个回调函数，只要他们希望监视的元素进入或退出另一个元素（或视口），或者当两者相交的量改变了请求的量时，就会执行该回调函数。-- ( https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API )

因此，如果我执行以下操作，我会认为当元素的顶部也碰到视口的顶部时会触发回调？

但它似乎只在元素顶部滚动并触及视口底部时才被触发，但不是两者兼而有之。想法？

我正在尝试创建一个结构指令，该指令延迟加载组件。我正在使用 createEmbeddedViews 函数将组件作为兄弟姐妹添加到模板引用中。我需要检查最后一个兄弟是否在视口中，然后触发添加更多兄弟。这一直持续到最后添加的组件超出视口为止。示例代码是，

交叉观察者被监视，可见组件将增加，并且将再次调用 for 循环以添加更多兄弟姐妹。在这里面临一个问题是传递最后一个兄弟姐妹。当所有兄弟姐妹完成渲染时，最后一个兄弟姐妹可用。但是函数 intersection.observe 在 for 循环之后被调用。需要帮助！！！...谢谢

为什么交叉点观察器不适用于所有浏览器？

如果交叉点观察器不可用，那么使用 polyfill 会更好吗？

我想知道 polyfill 是否也被优化为 Intersection Observer。如果 polyfill 对性能产生任何影响，那么我将避免使用它

当我真正可以看到图像时，我想加载延迟图像。

所以，我使用了交叉点观察者 API。它似乎工作正常

但overflow : hidden似乎不适用于交集 API

“不工作”意味着 DOMoverflow: hidden似乎触发了交叉点 API，因此我无法加载懒惰的图像

还有什么可做的吗？或者那些结果是有意的？

当原始图像进入用户的视口时，我正在使用IntersectionObserver另一个图像替换最初加载的图像。

我希望图像淡入，而不是直接替换。

我尝试将 Jquery 加载程序添加到图像中，但它没有按我的意愿工作。

我在没有特定选项的情况下初始化了一个 Intersection Observer，因此阈值等于 0.0，并且事件应该在被观察元素的第一个像素进入视口时触发。

这就是当我通过滚动触发观察者时发生的情况，以及当我使用使用简单 CSS 属性（如top. 但是，当观察到的元素出现在视口中时，这要归功于带有过渡动画的 CSS 变换，观察者在动画结束之前不会触发回调。我需要它在元素出现在视口内的那一刻触发，因为它应该是。

你可以在这里看到一个例子：https ://jsfiddle.net/38v2dots/2/

我现实世界的问题是与 CSS 3D 变换一起工作（不必要地）的 carrousel 库。但问题也发生在 2D 变换中。不幸的是，我被迫使用这个库，所以不能避免 3D 变换。

先感谢您。

我正在使用Intersection Observer API来跟踪网页上多个元素的可见性。当一个元素变得可见时，callback()应该执行一个函数。限制：对于每个元素，函数只能执行一次。

这是我当前对 Web 分析项目的实现：

我正在努力寻找一个不修改现有元素、IntersectionObserver 或 IntersectionObserverEntries 的解决方案。

通常我会使用闭包来确保一个函数只执行一次：

但在这种情况下，我很难应用该函数，因为 IntersectionObserver 使用了一个奇怪的回调迭代器逻辑，每次任何元素更改时都会执行该逻辑（而不是使用事件驱动模型）。

任何想法，如何实现一个不改变其他元素或对象的每个元素函数调用？