Image Lazy Loading JS libraries

[rkmk107]

Hi All,

Could you please share good reference JavaScript Libraries which we can use for image lazy loading for images present in custom AEM components. It should support normal <img> images as well background images.

Kindly help.

[Shashi_Mulugu]

I guess we dont need to have a separate JS plugin for this.. you can leverage browser capability.

https://web.dev/browser-level-image-lazy-loading/

[arunpatidar]

Hi,

The lazy load concept is really simple, you don't need any external library to achieve this

https://dev.to/ekafyi/lazy-loading-images-with-vanilla-javascript-2fbj 

Make sure you extend loading of images for print as well. The external API might not be supporting loading of images when you do print.

[rkmk107]

Will this work where components is integrated with Dynamic Media Component

[arunpatidar]

Yes, it will work.

[BrianKasingli · Accepted solution]

You can try using Vanilla-LazyLoad

LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, animated SVGs, videos and iframes to when they will enter the viewport. It's written in plain "vanilla" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading. See all features for more.

You can register this library as a CDN and simply place this code in your base page component (but it's best if you can host the lazyload.min.js in your client library, 

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>