PW Lazy Loader

Lazy loader with the following features:

• Follows the progressive enhancement strategy: Old browsers (not supporting <template>) or with javascript disabled will view the content.
• Works with any kind of content: images, videos, iframes, scripts, etc
• Build with ES6 and modern tools (webpack, babel, etc)
• Easy to extend and adapt to your needs

This library uses the Intersection Observer API to scan all <template data-lazyload> and <noscript data-lazyload> elements in the html and reveals its content when enter in the viewport. It's recomended to use <template> tag for cases in which javascript is required to see the content (youtube videos, tweets, facebook posts, etc) and <noscript> for the rest of the content (images, html5 videos, etc).

Demo

https://progressive-web-components.github.io/lazy-loader/

Install

Requirements:

• NPM to install the package and the dependencies
• Webpack (or any other javascript loader)

Polyfills:

It's recommended to use the IntersectionObserver polyfill to have support for more browsers

npm install pw-lazy-loader

Usage

This library scan for all template[data-lazyload] elements and load the content when the element enter in the viewport. It creates also a svg element as placeholder while the final html is not loaded.

Html

Let's say we have the following html code:

<template data-lazyload>
    <img src="some-big-image.jpg">
</template>
 
<!-- You can use also noscript tags -->
<noscript data-lazyload>
    <img src="other-some-big-image.jpg">
</noscript>

JS

Init the library:

import LazyLoader from 'pw-lazy-loader';
 
var loader = new LazyLoader();
loader.init();

Demo

To run the demo, just clone this repository enter in the directory and execute:

npm install
npm start

You should see something in http://localhost:8080/