javascript - 使用惰性大小检测 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

他们并没有完全填充它，他们只是实现了确保某些东西是自己可见的部分。所以你能不能取决于你在做什么。

``