🚩 Finally Native lazy-loading for the web was introduced. I recommend you to use loading attribute instead.
HTMLImageElement extension for lazy loading. Images will be loaded when they are shown.
Install lazyload-image via npm.
$ npm install lazyload-imageImport 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="path/to/your/image.jpg"
offset="200px"
width="100"
height="100"
>If a browser does not support customElements.define(), images will be loaded as usual.