Awesome

<x-imager>

A Polymer element for responsive images with Imager.js

Maintained by Addy Osmani.

Demo

Check it live.

Installation

Install using Bower:

 bower install x-imager

Usage

Import Web Components' polyfill (platform.js)

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>

Import Custom Element:

<link rel="import" href="x-imager.html">

Start using it!
```
<x-imager></x-imager>
```

Options

Attribute	Options	Default	Description
`src`	string	``	URL endpoint for images
`widths`	space separated list	``	available image widths
`width`	number	``	enforced size of the image placeholder
`selector`	string	`delayed-image-load`	used to locate your div placeholders
`class`	string	``	Class name to give your resizable images
`resize`	boolean	`true`	update the src attribute of the relevant images
`lazyload`	boolean	`false`	Toggle the lazy load functionality
`scrollDelay`	number	``	helps performance by setting a higher delay

Examples:

<x-imager widths="200 260 320 600" src="http://placehold.it/{width}" width="340"></x-imager>

<x-imager widths="400 460 420 1200" src="http://placehold.it/{width}" width="500" class="img-replace" resize="false" className="imagered"></x-imager>

<x-imager widths="400 460 420 1200" src="http://placehold.it/{width}" width="400" class="img-replace" resize="false" className="imagered" scrollDelay="100" lazyload="true"></x-imager>

License

MIT License