Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

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