Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including lazy-scripts with all npm packages installed. Try it out:

var lazyScripts = require("lazy-scripts")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

lazy-scripts v0.3.2

load, parse and execute scripts when needed

lazy-scripts

Like you do with lazy loaded images, lazy load, parse and execute your js.

Quick Start

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.

ES-6 usage

import LazyScripts from 'lazy-scripts';

new LazyScripts();

ES-5 usage

<script src="lazy-scripts.min.js"></script>
<script>new LazyScripts();</script>

Options

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.

CustomEvents (since 0.2.2)

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);
  …

CustomEvents (since 0.2.3)

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.

MutationObserver (since 0.3.0)

With 0.3.0 a MutationObserver watches your DOM changes and will trigger lazy scripts on DOM changes. No work needed on your side.

Script Adjustments

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.

Browser Support

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free