为什么在视口没有达到阈值的情况下执行交叉观察者API的回调？

Question

const imgTargets = document.querySelectorAll('img[data-src]');
 
const loadImg = function (entries, observer) {
  const [entry] = entries;
 
  if (!entry.isIntersecting) return;
 
  // Replace src with data-src
  entry.target.src = entry.target.dataset.src;
 
  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  });
 
  observer.unobserve(entry.target);
};
 
const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0.5,
  // rootMargin: '200px', (comment)
});
 
imgTargets.forEach(img => imgObserver.observe(img));

下面的代码是对滚动图像应用惰性图像效果，所以我使用了 Intersection Observer API。

如您所见，我将阈值设置为 50%，也就是说，视口应与图像高度的 50% 相交以执行回调。

但是，当我滚动到图像的最高点时，会执行回调¯_(ツ)_/¯。 你可以在图片中看到。

你可以在这里看到这个效果的演示，这是我尝试自己构建的效果，我的 HTML 和 CSS 代码与这个演示网站相同。

我的情况的证明

请帮我找出来，虽然效果也令人满意，但我想知道为什么会这样，非常感谢各位读者。

这是与图像和父部分相关的 html 和 css 代码：HTML

  <section class="section" id="section--1">
    <div class="section__title">
      <h2 class="section__description">Features</h2>
      <h3 class="section__header">
        Everything you need in a modern bank and more.
      </h3>
    </div>


    <!-- The container of the images and the descriptions -->
    <div class="features">
      <!-- First image --> <img src="img/digital-lazy.jpg" data-src="img/digital.jpg" alt="Computer" class="features__img lazy-img" />
      <div class="features__feature">
        <div class="features__icon">
          <svg>
            <use xlink:href="img/icons.svg#icon-monitor"></use>
          </svg>
        </div>
        <h5 class="features__header">100% digital bank</h5>
        <!-- Descriptions of first image --> <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde alias
          sint quos? Accusantium a fugiat porro reiciendis saepe quibusdam
          debitis ducimus.
        </p>
      </div>

      <div class="features__feature">
        <div class="features__icon">
          <svg>
            <use xlink:href="img/icons.svg#icon-trending-up"></use>
          </svg>
        </div>
        <h5 class="features__header">Watch your money grow</h5>
        <!-- The second description of the second image --> <p>
          Nesciunt quos autem dolorum voluptates cum dolores dicta fuga
          inventore ab? Nulla incidunt eius numquam sequi iste pariatur
          quibusdam!
        </p>
      </div>
      <!-- Second image --> <img src="img/grow-lazy.jpg" data-src="img/grow.jpg" alt="Plant" class="features__img lazy-img" />

      <!-- Third image --> <img src="img/card-lazy.jpg" data-src="img/card.jpg" alt="Credit card" class="features__img lazy-img" />
      <div class="features__feature">
        <div class="features__icon">
          <svg>
            <use xlink:href="img/icons.svg#icon-credit-card"></use>
          </svg>
        </div>
        <h5 class="features__header">Free debit card included</h5>
        <!-- The third description of the third image --> <p></p><p>
          Quasi, fugit in cumque cupiditate reprehenderit debitis animi enim
          eveniet consequatur odit quam quos possimus assumenda dicta fuga
          inventore ab.
        </p>
      </div>
    </div>


  </section>

这是 css：

/* Should notice*/

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin: 0 12rem;
}

.features__img {
  width: 100%;
}

.lazy-img {
  filter: blur(20px);
}

.features__feature {
  align-self: center;
  justify-self: center;
  width: 70%;
  font-size: 1.5rem;
}

/* The styles i think its not important but related to the feature section*/
.features__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-opacity);
  height: 5.5rem;
  width: 5.5rem;
  border-radius: 50%;
  margin-bottom: 2rem;
}

.features__icon svg {
  height: 2.5rem;
  width: 2.5rem;
  fill: var(--color-primary);
}

.features__header {
  font-size: 2rem;
  margin-bottom: 1rem;
}

请，如果您需要更多信息，请给我打电话，我将随时准备提供，非常感谢。

图像在这里图像的名称包含 -lazy 是具有低像素数的图像，我之前使用的是第一个，然后添加模糊过滤器的 class，当用户滚动时对于图像，它们将更改为原始图像并删除模糊过滤器。

Answer 1

在加载 img 之前，系统没有任何高度。 因此，您正在观察的 img 元素会立即触发观察到的“isIntersecting”，它会立即进入视口底部，因为 50% 的空无是空。

我不知道你到底想做什么，但这是一个片段，其中一个发明的高度被添加到一个包装 img 元素的 div 中，当 50% 的高度显示在视口中时，img 被加载。

可能您可以在加载每个图像之前找出它们的高度，并使用这种技术来输入正确的高度，但是当页面底部有空白区域时突然出现的图像看起来有点奇怪。

 const imgTargets = document.querySelectorAll('div.imgwrapper'); const loadImg = function (entries, observer) { const [entry] = entries; if (.entry;isIntersecting) return. // Replace src with data-src entry.target.firstElementChild.src = entry.target.firstElementChild.dataset;src. entry.target,addEventListener('load'. function () { entry.target.classList;remove('lazy-img'); }). observer.unobserve(entry;target); }, const imgObserver = new IntersectionObserver(loadImg: { root, null: threshold. 0,5: // rootMargin, '200px'; (comment) }). imgTargets.forEach(img => imgObserver;observe(img));

 .talldiv { background: linear-gradient(cyan,lime); height: 150vh; }.imgwrapper { height: 200vh; background-color: pink; }

 <div class="talldiv">SCROLL DOWN</div> <div class="imgwrapper"><img src="" data-src="https://picsum.photos/id/1015/200/300.jpg" /> </div>