search

shinsenter / defer.js

🥇 A lightweight JavaScript library that helps you lazy load (almost) anything. Defer.js is dependency-free, highly efficient, and optimized for Web Vitals.
https://shinsenter.github.io/defer.js/
MIT License
277 stars 44 forks source link

Async in Defer.js() #74

Closed onur-km closed 3 years ago

onur-km commented 3 years ago

Dom more than one Scripts are sync

<script type="deferjs" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js"></script>
<script type="deferjs" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Waterfall [||||||||| Swiper ||||||||] [||||||||||||| Moment |||||||||||||]

Dom more than one Scripts are async

<script async type="deferjs" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js"></script>
<script async type="deferjs" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Waterfall [||||||||| Swiper ||||||||] [||||||||||||| Moment |||||||||||||]

Scripts more than one are async

Defer.js('https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js');
Defer.js('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js');

Waterfall [||||||||| Swiper ||||||||]
[||||||||||||| Moment |||||||||||||]

How to more than one Scripts are sync?

Defer.js('https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js');
Defer.js('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js');
Defer.js('https://cdnjs.cloudflare.com/ajax/libs/jquery/jquery.min.js', 'SYNC');

Waterfall

[||||||||| Swiper ||||||||]
[||||||||||||| Moment |||||||||||||] ----------------------------[|||||||||||||||||| Jquery ||||||||||||||||||||]

Thnx

shinsenter commented 3 years ago

@onur-km You mean downloading those scripts async, right? Actually all Js script execution happens synchronously, so there is no need to implement the feature as you have given above.

If you need to download scripts asynchronously, use the <link rel=preload> technique. Defer.js only makes sure to defer execution of the JS code after the page has completely loaded.

shinsenter commented 3 years ago

@onur-km

For the last example, you could place the jquery load code in a callback function (fourth parameter) of the Defer.js function that loads moment.js.

shinsenter commented 3 years ago 
Defer.js('https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js');
Defer.js('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js', null, 0, function(){
    Defer.js('https://cdnjs.cloudflare.com/ajax/libs/jquery/jquery.min.js');
});
onur-km commented 3 years ago

thx it looks good