LazyScripts

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:

• script-1.js
• script-2.js

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...

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.