🚩 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="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.

License

MIT © Shogo Sensui