Extended Image Tag
AcidJs.XImg is an extended image tag with out-of-the-box lazy loading and much more:
<acidjs-ximg
width="310"
height="233"
src="images/image-01.jpg">
</acidjs-ximg>
<acidjs-ximg
width="310"
height="233"
placeholder="path/to/custom/placeholder.png",
src="images/image-01.jpg">
</acidjs-ximg>
If you are interested in other HTML5 Web Components extending images you may want to check X-Reflect and X-meme.
Demo
Scroll the page down to reveal the images. If you are looking for a pure JavaScript solution for image lazy loading, check this one.
Register Mozilla's X-Tags
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<script src="AcidJs.XImg/lib/x-tag-components.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<link rel="import" href="AcidJs.XImg/classes/XImg.html" />
HTML Attributes
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
Usage and Code Insight
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-01.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-02.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-03.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-04.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-05.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-06.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-07.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-08.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-09.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-10.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/bc-rich-stealth/image-11.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-01.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-02.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-03.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-04.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-05.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-06.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-07.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/aurellia-that-girl-universe/image-08.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-01.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-02.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-03.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-04.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-05.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-06.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-07.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-08.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-09.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-10.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/carvin-legacy-3/image-11.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-sv-acid-martin/image-01.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-sv-acid-martin/image-02.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-sv-acid-martin/image-03.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-sv-acid-martin/image-04.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-mh-100-acid-martin/image-01.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-mh-100-acid-martin/image-02.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-mh-100-acid-martin/image-03.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-mh-100-acid-martin/image-04.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-mh-100-acid-martin/image-05.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-mh-100-acid-martin/image-06.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-mh-100-acid-martin/image-07.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-mh-100-acid-martin/image-08.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/esp-mh-100-acid-martin/image-09.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/zilla-cab-2-x-12/image-01.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/zilla-cab-2-x-12/image-02.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/zilla-cab-2-x-12/image-03.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/zilla-cab-2-x-12/image-04.jpg"></acidjs-ximg>
<acidjs-ximg width="310" height="233" src="http://wemakesites.net/images/music/avid-eleven-rack/image-01.jpg"></acidjs-ximg>
/*
* X-Img Web Component by Martin Ivanov (@wemakesitesnet)
* More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/#!/wemakesitesnet
* @url developer blog http://acidmartin.wordpress.com/
**/
acidjs-ximg,
acidjs-ximg *
{
margin: 0;
border: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
}
acidjs-ximg
{
background: #fff;
margin: 8px 2px 0;
}
acidjs-ximg img[width]
{
opacity: .25;
}
acidjs-ximg[loading]
{
position: relative;
cursor: wait;
}
acidjs-ximg[loading]::before
{
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 5;
width: 100%;
height: 100%;
background: #f7f7f7 url("images/loading.gif") no-repeat center;
}