Expand my Community achievements bar.

SOLVED

Image Lazy Loading JS libraries

Avatar

Level 3

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.

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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>

View solution in original post

5 Replies

Avatar

Community Advisor

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/

Avatar

Community Advisor

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.



Arun Patidar

Avatar

Level 3

Will this work where components is integrated with Dynamic Media Component

Avatar

Correct answer by
Community Advisor

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>