Skip to content
loading...

re: Lazy Loading With IntersectionObserver API VIEW POST

TOP OF THREAD FULL DISCUSSION
re: Hi! Thanks for sharing! As far as I’ve noticed, the number of entries depends on the number of thresholds you provide. So, in this case, if we ...
 

Hey Andrei! Thanks for reading! Appreciate the time you took to read. I believe the # of entries is the # of selection. Feel free to play with my codepen:

codepen.io/iggredible/pen/axQJwg

On JS, you can see that I console.log my entries. Right now I have 10 images. You'll see:

entries: (10) [IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry]

If you removed some of the images (say you removed 3, leaving you with only 7 img elements on HTML), you'll see:

entries:  (7) [IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry, IntersectionObserverEntry]

This is why I believe # of entries depends on # of elements you selected. The way I interpret it is, each entry is IntersectionObserverEntry object - I see it as properties of each image that are related to intersectionality. I think this is how IntersectionObserver keeps track of when each entry 'intersects' with viewports (or whatever ancestor you chose). As proof, you can see one of them having these attributes:

boundingClientRect: DOMRectReadOnly {x: 8, y: 22, width: 0, height: 0, top: 22, …}
intersectionRatio: 0
intersectionRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
isIntersecting: false
isVisible: false
rootBounds: null
target: img
time: 425.7650000072317

I digress a little, but hope it helps!!

 

Thanks for such a detailed and explanatory answer!
It definitely helped, now I have solved my misunderstanding.

code of conduct - report abuse