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: [
''
]
},
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();