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

[user00181]

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.

[arunpatidar]

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

[DPrakashRaj]

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

[user00181]

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

[ShaileshBassi]

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