為什么在視口沒有達到閾值的情況下執行交叉觀察者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>