HTML5, CSS3 & JS Experiments

By Martin Ivanov

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;
}