简体   繁体   English

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

[英]Why the callback of Intersection Observer API is executed when even viewport didn't reach the threshold?

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));

The codes down below is applying the lazy images effect for images on scroll, so i used the Intersection Observer API.下面的代码是对滚动图像应用惰性图像效果,所以我使用了 Intersection Observer API。

As you can see, i set the threshold is 50%, that's mean, the viewport should intersect 50% of the image height to make the callback executed.如您所见,我将阈值设置为 50%,也就是说,视口应与图像高度的 50% 相交以执行回调。

But, when i scrolled just to reached the very top point of the image, the callback is executed ¯_(ツ)_/¯.但是,当我滚动到图像的最高点时,会执行回调¯_(ツ)_/¯。 You can see at the picture.你可以在图片中看到。

You can see the demo of this effect at here , which is the effect that im trying to build on my own, and my HTML and the CSS codes are just the same with this demo website.你可以在这里看到这个效果的演示,这是我尝试自己构建的效果,我的 HTML 和 CSS 代码与这个演示网站相同。

The proof of my situations我的情况的证明

Pls help me to find out, although the effect is also satisfying but i want to know why this is happening, thank you so much, readers.请帮我找出来,虽然效果也令人满意,但我想知道为什么会这样,非常感谢各位读者。

And here is my html and css codes that are related to the images and the parent sections: HTML这是与图像和父部分相关的 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>

And here is the css:这是 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;
}

Please, if you need some more informations, please call me to give, i will always ready to provide, thank you so much.请,如果您需要更多信息,请给我打电话,我将随时准备提供,非常感谢。

The images are here The images have the name which is contains -lazy are the images that are have the low numebrs of pixels, that i use the first before, and then add the class of the blur filters, and the, when the users scroll to the images, they will change to the orginal ones and remove the blur filers.图像在这里图像的名称包含 -lazy 是具有低像素数的图像,我之前使用的是第一个,然后添加模糊过滤器的 class,当用户滚动时对于图像,它们将更改为原始图像并删除模糊过滤器。

Before an img is loaded the system does not have any height for it.在加载 img 之前,系统没有任何高度。 Therefore the img element which you are observing triggers the observed 'isIntersecting' immediately it comes into the bottom of the viewport because 50% of nothing is nothing.因此,您正在观察的 img 元素会立即触发观察到的“isIntersecting”,它会立即进入视口底部,因为 50% 的空无是空。

I don't know exactly what you want to do but here is a snippet where an invented height is added to a div wrapping an img element and when 50% of this is showing in the viewport, the img gets loaded.我不知道你到底想做什么,但这是一个片段,其中一个发明的高度被添加到一个包装 img 元素的 div 中,当 50% 的高度显示在视口中时,img 被加载。

Possibly you could find out the heights of each image before they are loaded and use this technique to put in the proper heights, but it looks a bit odd an image suddenly appearing when there has been a blank space at the bottom of the page.可能您可以在加载每个图像之前找出它们的高度,并使用这种技术来输入正确的高度,但是当页面底部有空白区域时突然出现的图像看起来有点奇怪。

 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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Intersection Observer API Fires回调甚至元素不在视图中 - Intersection Observer API Fires callback even element is not in view Intersection Observer API:回调 function 未在交叉路口触发 - Intersection Observer API: Callback function is not triggered on intersection Intersection Observer API:观察视口的中心 - Intersection Observer API: Observe the center of the viewport 元素离开视口时的交点观察者 - Intersection Observer when element leaves the viewport 当 CSS 转换将元素带入视口时,Intersection Observer 无法正常工作 - Intersection Observer doesn't works properly when a CSS Transform brings the element inside viewport Intersection Observer API 中 rootMargin 和 threshold 之间的主要区别是什么? - What is the main difference between rootMargin & threshold in Intersection Observer API? 当元素使用 getBoundingClientRect 或交叉点观察器进入视口时运行 function - Run function when element enters to viewport with getBoundingClientRect or intersection observer Intersection Observer 不是在视口上的可见性低于 50% 的工作元素 - Intersection Observer isn't working elements having less than 50% visibility on viewport 导航栏不适用于 Intersection Observer API - Navigation bar doesn't work with Intersection Observer API 为什么在使用 scrollTo 或 scrollIntoView 时不会触发交叉点观察者处理程序? - Why intersection observer handler is not fired when using scrollTo or scrollIntoView?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM