Image Lazy Loading JS libraries | Community
Skip to main content
R
rkmk107
August 24, 2022
Solved

Image Lazy Loading JS libraries

  • August 24, 2022
  • 3 replies
  • 2359 views

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.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

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>

3 replies

Shashi_Mulugu
Community Advisor
Shashi_MuluguCommunity Advisor
Community Advisor
August 24, 2022

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
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    August 24, 2022

    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
      R
      rkmk107Author
      August 24, 2022

      Will this work where components is integrated with Dynamic Media Component

        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        August 26, 2022

        Yes, it will work.

        Arun Patidar
          BrianKasingli
          Community Advisor and Adobe Champion
          BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
          Community Advisor and Adobe Champion
          August 24, 2022

          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>
            Terms & ConditionsAccessibility statement

            Loading footer...