If you are in need of a feature known as "lazy loading", look no further. Lazy Loading ensures that necessary resources are only loaded when the user requires them. Specifically, in this scenario, the image will only be loaded once it enters the viewport (the visible area on the screen).
For users of Chromium-based browsers and Firefox, utilizing the "loading" attribute in the img tag with a value of "lazy" is the simplest method. For example: img loading=lazy src="link"
This approach should cover most situations. However, if you desire more control over the functionality, consider exploring the concept of an "Intersection Observer". This tool enables various manipulations related to elements and their visibility within the viewport. For instance, determining the distance between an element and the viewport, or calculating what percentage of the element is currently visible.
If you prefer a brief 15-minute video introduction to the fundamentals of Intersection Observer, I recommend checking out this YouTube link:
https://www.youtube.com/watch?v=2IbRtjez6ag
I trust that these insights will aid you in resolving your issue effectively!