HTML5, CSS3 & JS Experiments

By Martin Ivanov

Client-side Image Placeholders

Unlike other online services, AcidJs.ImgPlaceholder renders fully customizable image placeholders (replacement images) entirely in the browser using SVG. Just like this:

<img data-imgplaceholder />
<img data-imgplaceholder width="200" height="100" />
<img data-imgplaceholder data-label="Custom Label" data-border-width="20" data-border-color="#b01e00" data-bgcolor="#f3b200" data-forecolor="#b01e00" />
<img data-imgplaceholder data-forecolor="#333" data-bgcolor="#00c13f" width="200" height="130" />
<img data-imgplaceholder data-border-color="#e34c26" data-label="HTML5, SVG and JavaScript" data-bgcolor="#f6f6f6" width="300" height="200" />
<img data-imgplaceholder data-forecolor="#333" data-border-width="20" data-bgcolor="#00c13f" width="200" height="140" />

Demo

Default Settings

Custom Width and Height

Custom Label, Border Color, Border Width, Background Color Fore Color

Custom Fore and Background Color

Custom Border Color, Fore and Background Color, Custom Label

Custom Border Color and Width, Fore and Background Color

Supported Browsers

All evergreen browsers and IE9+.

Register the Class

<script src="AcidJs.ImgPlaceholder/classes/ImgPlaceholder.js"></script>

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

/*
 * SVG and JavaScript Image Placeholder by Martin Ivanov (@wemakesitesnet)
 * @author Martin Ivanov
 * @url portfolio: http://wemakesites.net/
 * @url twitter: https://twitter.com/wemakesitesnet
 * @url blog: http://martinivanov.net
 * @url more HTML5, CSS3 and JavaScript experiments: http://experiments.wemakesites.net
 * @url web-based MS Office-like ribbon toolbar: http://ribbonjs.com
 **/

/*
 * USAGE:
 * 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
 * 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required. 
 **/

(function() {
    
    "use strict";
    
    var
        W = window,
        D = document;
    
    if(undefined === W.AcidJs) {
        W.AcidJs = {};
    }
    
    W.AcidJs.ImgPlaceholder = (function() {
        var
            TEMPLATES = {
                base: [
                    '',
                        '',
                        '{{label}}',
                    ''
                ]
            },
            ATTRS = {
                fill: "data-bgcolor",
                color: "data-forecolor",
                label: "data-label",
                placeholder: "data-imgplaceholder",
                borderWidth: "data-border-width",
                borderColor: "data-border-color"
            },
            nameSpaceUri = "http://www.w3.org/2000/svg";
        
        function compile(name, data) {
            var 
                html = TEMPLATES[name] || [];
            
            data = data || {};
            
            html = html.join("");
            
            for(var key in data) {
                if(data.hasOwnProperty(key)) {
                    var
                        value = data[key],
                        regexp = new RegExp("{{" + key + "}}", "g");
                
                    html = html.replace(regexp, value);
                }
            }
            
            return html;
        }
        
        return {
            render: function() {
                var 
                    placeholder = ATTRS.placeholder,
                    images = D.querySelectorAll("img[" + placeholder + "]");
                
                [].forEach.call(images, function(image) {
                    var
                        svg = D.createElementNS(nameSpaceUri, "svg"),
                        rect = D.createElementNS(nameSpaceUri, "rect"),
                        text = D.createElementNS(nameSpaceUri, "text"),
                        itemWidth = image.getAttribute("width") || "auto",
                        itemHeight = image.getAttribute("height") || "auto",
                        data = {
                            fill: image.getAttribute(ATTRS.fill) || "#d4d0c8",
                            color: image.getAttribute(ATTRS.color) || "#666",
                            label: image.getAttribute(ATTRS.label) || itemWidth + " x " + itemHeight,
                            borderWidth: image.getAttribute(ATTRS.borderWidth) || 10,
                            borderColor: image.getAttribute(ATTRS.borderColor) || "#666"
                        };

                    svg.appendChild(rect);
                    svg.appendChild(text);
                    
                    image.setAttribute("src", "data:image/svg+xml," + encodeURIComponent(compile("base", data)));
                    image.removeAttribute(placeholder);
                });
            }
        };
    })();
})();

window.AcidJs.ImgPlaceholder.render();