javascript - How does JS dynamically load images determine whether the image is on the screen?

Question

Scroll down with the mouse and load the image when the target area appears on the screen. So how to determine whether the target area appears on the screen?

Answer 1

Use the getBoundingClientRect() method of the image to return the left, top, right and bottom relative to the viewport
to determine whether it is within the viewport.

Refer to getBoundingClientRect

Answer 2

Calculate the distance from the image to the head of the page, and then detect the scrolling distance of the scroll bar