Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

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

Avatar

Level 3

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.

4 Replies

Avatar

Community Advisor

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

Avatar

Community Advisor

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

Avatar

Level 3

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

Avatar

Community Advisor

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