[英]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.