🚩 Finally Native lazy-loading for the web was introduced. I recommend you to use loading attribute instead.
lazyload-image
HTMLImageElement extension for lazy loading. Images will be loaded when they are shown.
Install
Install lazyload-image via npm.
$ npm install lazyload-image
Usage
Import LazyloadImage and register it.
import LazyloadImage from 'https://unpkg.com/lazyload-image';
customElements.define('lazyload-image', LazyloadImage, {
extends: 'img'
});
Modify your <img> elements such as following.
<img
is="lazyload-image"
src="https://raw.githubusercontent.com/1000ch/lazyload-image/master/path/to/your/image.jpg"
offset="200px"
width="100"
height="100"
>
Fallback
If a browser does not support customElements.define(), images will be loaded as usual.