Lazy loading images
Images can delay your overall page load experience due to image numbers and their size. There are different strategies for optimizing image delivery. The first one you should consider is lazy loading images below the fold.
This could be a very tricky technique to execute. Modern APIs can help you, the IntersectionObserver (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API in particular gives you the ability to detect when elements are entering the viewport. You can designate the distance and time estimated threshold for an element to appear.
The IntersectionObserver API will trigger an event to let you know when an element is about to be displayed. At this point, you can initiate an image ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access