lazyload-image

HTMLImageElement extension for lazy loading.

Install

Install lazyload-image via npm or bower.

# via npm
$ npm install lazyload-image

# via bower
$ bower install lazyload-image

Usage

Load lazyload-image.html in your HTML.

<link rel="import" href="lazyload-image.html">

Modify your <img> elements such as following.

<img is="lazyload-image" src="path/to/your/image.jpg" width="100" height="100">

You can specify load offset.

<img is="lazyload-image" src="path/to/your/image.jpg" offset="200" width="100" height="100">

Fallback

If browser does not support document.registerElement(), Images will be loaded as usual.

Demo

Recommend you to open DevTools's Elements tab to see behavior of <lazyload-image>.