How to implement lazy loading for js and css file in AEM 6.5 | Community
Skip to main content
U
user00181
Level 2
April 6, 2023

How to implement lazy loading for js and css file in AEM 6.5

  • April 6, 2023
  • 2 replies
  • 2704 views

Hi All,

 

I want to implement lazy loading for JS and CSS file in AEM component just like image lazy loading.

 

I want to load JS and CSS file when i am scrolling page. Suppose i am scrolling page and in that page below  component JS and CSS file call will come at that time in network tab.

 

 

Thanks,

Niraj.

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

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
April 6, 2023

Hi, Here is the implementation for lazy image loading, you can refer same for js and css,

https://code.tutsplus.com/tutorials/lazy-loading-images-using-html-and-javascript--cms-93833 

 

This idea may not work as expected but still you can try

Arun Patidar
    DPrakashRaj
    Community Advisor
    DPrakashRajCommunity Advisor
    Community Advisor
    April 6, 2023

    I believe you can implement lazy loading for images but not for js and css.

      U
      user00181Author
      Level 2
      April 12, 2023

      Yes, For image lazy loading is working fine, but i need to lazy loading on JS and CSS file.

      ShaileshBassi
      Community Advisor
      ShaileshBassiCommunity Advisor
      Community Advisor
      April 10, 2023

      Hi @user00181  You can try something similar

      $( window ).scroll(function() { $(window).scrollTop() > 30) { await loadScript("js/myscript.js"); } });

      Reference : https://stackoverflow.com/questions/19737031/loading-scripts-after-page-load
      Hope this helps!

      Thanks

        Terms & ConditionsAccessibility statement

        Loading footer...