HTMLImageElement extension for lazy loading.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
.editorconfig
.gitignore
.npmignore
app.js
bower.json
index.html
lazyload-image.js
package.json
readme.md

readme.md

<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