I need help with this specific scenario. I am initially setting the div background color and opacity of the image to 0 so that if the image is still not loaded, then show the background color of the div. So when I loaded the page, I initially saw a background color. What I cannot understand is this, the intersection observer immediately sets inView property to true if the element is visible to viewport. But in my case, I cannot see the inView set to false and even I can see in dom image element is present. Once the image is loaded and shown on screen, I see on console inView set to false and then immediately to true.

Help me understand this. Any help is appreciated. If anyone cannot understand what I am asking, Kindly let me know I will clarify it.