Question

我尝试在我的angular 7应用程序中使用Intersection Observable延迟加载图像。我从ngAfterViewInit生命周期挂钩中调用了Intersection Observable。但是，当我加载该应用程序时，回调被调用了两次，一次是将所有isIntersecting值都设置为true，而下一次是使用正确的isIntersecting值。我对此行为感到困惑。

ngAfterViewInit() {
const imgOne = document.querySelectorAll('[data-class]');

    const options = {
      // root: document
      // threshold: 0
    };

    const observer = new IntersectionObserver((entries, observer) => {
      console.log(entries.length);
      entries.forEach((entry) => {
        // console.log(entry);
        if (!entry.isIntersecting) {
          return;
        } else {
          const el = entry.target;
          if (el.id === ('test' + this.testCount)) {
            console.log(entry);
          }
          // observer.unobserve(entry.target);
        }
      });
    });

    imgOne.forEach((eachQuery) => {
      observer.observe(eachQuery);
    });
 }

https://stackblitz.com/edit/angular-wqbuyr

更新：现在完美地调用了交叉观察器，但是现在出现了问题。由于我们正在使用document.querySelectorAll返回静态节点列表，因此一旦更新数组，节点列表就不会更新。如果我尝试使用document.getElementsByClassName，则抛出错误，因为它不是Node列表。

Answer 1

我通过删除ngOnInit（）解决了该问题，因为它在加载后再次触发ngAfterViewInit（）。

Answer 2

也许这也可行：

if (entry.isIntersecting && Math.floor(entry.intersectionRatio) === 1) { 
  const el = entry.target;
  if (el.id === ('test' + this.testCount)) {
    console.log(entry);
  }
} else {
  return;
}

“ 如果您不检查intersectionRatio ratio === 1，则观察到的元素将触发两次回调，因为当立即通过/离开100％阈值时，观察者将触发isIntersecting = true，intersectionRatio〜= 0.9（可能是错误）。 Chrome会以某种方式使第一个框上的交集比率略高于1，因此将值设为底线“

来源：https://codepen.io/mmanney/details/erpZbd

交集观察器在ngAfterViewInit上触发两次回调

2 个答案: