Discussion on: Lazy Loading With IntersectionObserver API

[Andrei Gatej]

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 have threshold: 0.5, there will be only one entry.
I might be wrong. I’ll check as soon as I can.

[Igor Irianto]

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!!

[Andrei Gatej]

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