X-IMG: HTML5 Web Component for Image Lazy Loading and More

AcidJs.XImg is a HTML5 Web Component, wrapped as a custom extended image tag supporting out-of-the-box lazy loading, native getters, setters and JavaScript methods. And what is is most important, using it is as simple as:

[sourcecode language=”html”]
<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>
[/sourcecode]

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the img/acidjs-ximg-specific:

• src – URI of the image that will be loaded when scrolled into view.
• width – width of the image in pixels.
• height – Height of the image in pixels.
• title – Optional title of the image.
• placeholder – Optional URI to the placeholder image. If not set, one of the system will be used (Check the PLACEHOLDERS object in the AcidJs.XImg/classes/XImg.file). You can create your own base-64-encode placeholder with this online tool and add them to the PLACEHOLDERS.

All attributes are also getters/setters.

JavaScript Events of the Tag

Any native JavaScript event (click, mouseover, etc.)

JavaScript Methods of the Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc.

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website. You may also want check this blog post to learn how to implement lazy loading with images with JavaScript only.