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

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

thumb

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:

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.

Categories and Tags
Links

© 2006 - 2018 Martin Ivanov