Lazy Load & Pre-cache Images To Improve Page Speed – Img2

Img2 is a web component that lazy-loads and pre-caches images to improve the page loading time.

Also comes with an image blur effect that allows the user to preview the image until the image is completely loaded.

How to use it:

Installation.

# NPM
$ npm install img-2 --save

Import the ‘img2’ into your module.

// ES 6
import Img2 from 'img-2';

Or directly insert the JavaScript file into the document.

// ES 6
<script src="dist/img-2.js"></script>
// ES 5
<script src="dist/img-2.es5.js"></script>

Embed your own images into the webpage using the <img-2> tag instead.  You can also specify the preview image in the src-preview attribute like so:

<img-2 src="full.jpg" width="400" height="300" src-preview="preview-10x10.jpg" alt="Image Alt"></img-2>