Lazy Loading

Lazy loading images in JavaScript

Naive Approach

Add a data-src attribute to the image with better resolution and let the src have a lower resolution image source which takes much less time to load. In the JavaScript file replace image.src with the image.data-src attribute.

Intersection Observer API

The Intersection Observer API lets code register a callback function that is executed whenever an element they wish to monitor enters or exits another element (or the viewport), or when the amount by which the two intersect changes by a requested amount.

Further Reading : Intersection Observer API - Web APIs | MDN