使用lazysizes检测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仅使用交集观察者（{3}}

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

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

他们没有完全填充它，他们只是实现确保某些东西是可见部分。你可以依靠你正在做的事情。

``