<lazyload-image>

HTMLImageElement extension for lazy loading. Images will be loaded when they are shown.

Photo by Susana Fernandez

Install

Install lazyload-image via npm or bower.

# via npm
$ npm install lazyload-image

# via bower
$ bower install lazyload-image

Usage

Load lazyload-image.js in your JavaScript.

import LazyloadImage from './lazyload-image.js';

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