Like you do with lazy loaded images, lazy load, parse and execute your js.
Include lazy-scripts.min.js
somewhere in your page, and call new LazyScripts();
at the end of your page, or whenever your page is loaded.
Add one of the following data-
-attributes to your markup:
<div class="my-slider" data-lazy-script="/path/to/my-slider.js">…</div>
or
<div class="my-slider" data-lazy-scripts='["/path/to/a/3rd-party/slider-lib.js","/path/to/my-slider.js"]'>…</div>
!important: take care of JSON.parse compatible Array-String when you use data-lazy-scripts
.
and that's it.
As soon as your html element enters the viewport, the js is loaded and executed.
import LazyScripts from 'lazy-scripts';
new LazyScripts();
<script src="lazy-scripts.min.js"></script>
<script>new LazyScripts();</script>
The constructor call new LazyScripts()
supports an option object like this:
new LazyScripts({
lazyScriptSelector: '[data-load-script]',
lazyScriptsSelector: '[data-load-scripts]'
});
by default the scripts will query your DOM for data-lazy-script
for a single js file, and data-lazy-scripts
for array notated scripts, load, parsed and executed in array order.
LazyScripts fires on every successful loaded script a lazyScriptLoaded
CustomEvent on the body
element, you can catch and do something with it.
…
function lazyCallback(event) {
console.log(event.detail.scriptSrc); // path of actual added script
}
document.body.addEventListener('lazyScriptLoaded', lazyCallback);
…
I de-include the CustomEvent
polyfill I added in 0.2.2
. LazyScripts still dispatches CustomEvents if your browser supports it. It is up to you to include (or no) the polyfill you like the most.
With 0.3.0
a MutationObserver watches your DOM changes and will trigger lazy scripts on DOM changes. No work needed on your side.
If your script(s) wait for a DOMContentLoaded
or window.load
you need to change that. These Events will be long forgotten when your scripts will be loaded, parsed and executed.
If you use Custom Events, this should be not a problem, the script is embedded in your page and will catch every event you fire.
lazy-scripts is a plain js library. It utilises IntersectionObserver but when no IntersectionObserver is found it will load all scripts directly. Your choice to include a IntersectionObserver polyfill or not.
For IE11 mdn-polyfills/NodeList.prototype.forEach is included, so you can use umd minified source out of the box.
With 0.2.2
mdn-polyfills/CustomEvent is added.
With 0.2.3
CustomEvent polyfill was removed. Include it by yourself if you need it.