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

Category: Image , Javascript , Loading , Recommended | April 22, 2018
Views Total:1,176 views
Official Page:Go to website
Last Update:April 22, 2018


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:


$ 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>

You Might Be Interested In:

Leave a Reply