使用惰性大小检测 DOM 节点何时进入视口

Question

我希望在特定 DOM 节点进入视口时调用回调。

另外我还有以下情况：

• 页面使用aFarkas/lazysizes。
• Intersection Observer API在一些需要支持的浏览器中没有实现。

我不想添加Intersection Observer Polyfill，因为aFarkas/lazysizes 捆绑了相同的功能。

因此我的问题是：是否可以使用aFarkas/lazysizes 来检测 DOM 节点何时进入视口？

Answer 1

您可以使用data-expand 属性告诉aFarkas/lazysizes 何时触发lazybeforeunveil 事件，如下所示：

<div class="lazyload" data-expand="-20">
  This will trigger a lazybeforeunveil event
  when entering the viewport.
</div>

window.addEventListener(
  'lazybeforeunveil', callback, false
);

请参阅data-expand 属性的文档：aFarkas/lazysizes#data-expand-attribute

Answer 2

不，我认为这不可能。

看起来 aFarkas/lazysizes 只使用交叉点观察器（如果可用）：https://github.com/aFarkas/lazysizes/blob/master/src/lazysizes-intersection.js#L11

否则，它们会限制一个名为 checkElements 的内部函数，该函数会在每次滚动时触发。 https://github.com/aFarkas/lazysizes/blob/master/src/lazysizes-core.js#L332

看起来他们没有公开这个功能：https://github.com/aFarkas/lazysizes/blob/master/src/lazysizes-core.js#L676

他们并没有完全填充它，他们只是自己实现确保某些东西是可见的部分。那你可以根据你在做什么。

``