Lazy Media

A 259 Byte lazy-loading library

Install

yarn add lazy-media

or

npm i lazy-media

or

import a UMD build from unpkg directly into your page

<script src="https://unpkg.com/[email protected]/dist/lazy-media.umd.js">

and it will expose a lazyMedia function on your window object.

or

If you're developing without a build system for an environment that supports ES modules, there is an ES module build published with the package.

<script type="module">
  import lazyMedia from 'https://unpkg.com/[email protected]/dist/lazy-media.module.js';

  // ...
</script>

Usage

import lazyMedia from 'lazy-media';

/* Call it when the DOM of your page is already setup.

useEffect hook in react, mounted in Vue, onMount	in Angular.
*/
lazyMedia();

With a config object

The config object is the same as the one you can pass into an IntersectionObserver (as the library uses that API under the hood)

You can read more about the options here.

/* With a sample config */

const config = {
  root: document.querySelector('#some-element'),
  rootMargin: '10px 15px',
  threshold: 0.25
};

lazyMedia(config);

With a callback function

which is called every time an element gets lazy-loaded, with the lazily-loaded element as its arguement.

const config = {
  root: document.querySelector('#some-element'),
  rootMargin: '10px 15px',
  threshold: 0.25
};

lazyMedia(config, element => {
  console.log(`element ${element} just got lazy-loaded`);
});

TODOS:

• Add typescript definition (maybe switch to tsdx if it can provide the same output sizes)
• Make better vanilla demo
• Add react demo (CRA, Nextjs)
• Add vue demo (cli, nuxt)