LazyScripts
LazyScripts takes the idea of lazy loaded images into javascript level.
Split your JavaScripts into single-concern-files and download and execute them, the moment they appear in your viewport.
A cool slider below the fold? A nice glimmerjs widget below the fold? A map? Save at initial bytes, but not at your user's experience!
Quick Start
npm install lazy-scripts --save
Use it in your ES-6 environment:
import LazyScripts from 'lazy-scripts';
...
const ls = new LazyScripts({});
...
Or take a ES-5 copy from the /dist
folder.
<script src="/vendor/lazy-scripts.min.js"></script>
<script>new LazyScripts();</script>
Add this data-attributes
to your Markup:
<section class="component-one" data-lazy-script="/path/to/a/javascript/file.js">coomponent markup</section>
or - if your component needs more than one script:
<section
class="component-one"
data-lazy-scripts='["/path/to/vendor/script.js","/path/to/another/javascript/file.js"]'>
component markup
</section>
Scripts, defined with data-lazy-scripts
attribute are executed in order.
Altering data-attribute
The constructor call can be fitted with an option object, to change one or both data-attributes
name:
const ls = new LazyScripts({
lazyScriptSelector: 'data-ls',
lazyScriptsSelector: 'data-lss'
});
// or
const ls = new LazyScripts({
lazyScriptSelector: 'data-ls'
});
// or
const ls = new LazyScripts({
lazyScriptsSelector: 'data-lss'
});
Events
You want to know which script got loaded and may take an action on this?
document.body.addEventListener('lazyScriptLoaded', myLazyScriptLoadedHandler);
function myLazyScriptLoadedHandler(scriptSrc) {
console.log(`loaded script: ${scriptSrc}`);
}
A CustomEvent
called lazyScriptLoaded is fired on every successful script loading.
With version 0.2.3
the CustomEvent
polyfill was removed and the corresponding code is warpped with if (window.CustomEvent) { … }
.
And this makes sense when?
Let's imagine a scroll-to handler scrolls down your website. During this scrolling some lazy-scripts appear and get loaded. Chances this scripts manipulate your DOM and it's layout are high. So your scroll-to scroller will scroll to somewhere, where your target was, but it is not anymore. With listening to the events, you can recalculate your scroll to target.
IIFEs ok, but other scripts?
For the moment yes. Split your code into library code and self-executing user code and LazyScripts can increase your TTI.
Code-Hooks for onload
event is planned.
Examples
the following section uses LazyScripts to load some very basic javascripts:
The second section grabs a copy of moment.js
before script-2.js is executed, because script-2 uses a function of moment.
Better examples on the way...
Script 1 Container
Script 2 Container
Browser Support
If a browser does not support IntersectionObserver you can add a polyfill, or all scripts are loaded directly after LazyScripts constructor call. Like the browser would do too.
I added two polyfills from the mdn-polyfill package: mdn-polyfills/NodeList.prototype.forEach
and .mdn-polyfills/CustomEvent