<x-imager>
A Polymer element for responsive images with Imager.js
Maintained by Addy Osmani.
Demo
Installation
Install using Bower:
bower install x-imagerUsage
-
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>