Dynamically Add Placeholder Images with jQuery
I was reading my friend Kyle Hayes post from earlier today. In it, he discusses a service called fpoimage.com that he created based upon the concept of dummyimage.com. The concept is simple: create a way to fill placement images in your layouts during the design and mock-up phase. He improved upon the concept by adding the ability to have some descriptive text in the generated image.
I thought it was a neat idea. The API was simple, simply call a URL with the size of your image and your descriptive text like so:
<img src="http://fpoimg.com/345×480/Advertisement" alt="Advertisement" width="345" height="480" />
While this API is straightforward enough, I figured that it could be even easier - with a little jQuery magic. What I wanted was that you could just add the width, height and alt tags and have the rest done for you. This would prevent you from, for example, having to modify width, height and label in both the URL and the img tag. In this scenario, you would simply add the image like so:
<img src="http://fpoimg.com" alt="Advertisement" width="345" height="480" />
Using jQuery, this was a pretty trivial task. As you can see in the code below, I created a function called loadFPOImages() that you would call when the DOM is loaded. This function loads any images with the src set to http://fpoimg.com and appends the width, height and alt text as required by the API. The following HTML creates the same images displayed on Kyle's post (you can see the page in action here):
<html>
<head>
<title>Placeholder Image Example</title>
<script src="scripts/jquery-1.4.1.min.js"></script>
<script language="JavaScript">
$(document).ready(function () {
loadFPOImages();
});
function loadFPOImages() {
var fpoImages = $("img[src='http://fpoimg.com']");
var src="";
for (var i=0;i<fpoImages.length;i++) {
src=$(fpoImages[i]).attr("src")
+"/"+$(fpoImages[i]).attr("width")
+"x"+$(fpoImages[i]).attr("height")
+"/"+$(fpoImages[i]).attr("alt");
$(fpoImages[i]).attr("src",src);
}
}
</script>
</head>
<body>
<p>
<img src="http://fpoimg.com" width="728" height="90" alt="Banner Ad" />
</p>
<p>
<img src="http://fpoimg.com" width="300" height="250" alt="MREC" />
</p>
<p>
<img src="http://fpoimg.com" width="345" height="480" alt="Advertisement" />
</p>
</body>
</html>
If you wanted to avoid the extra communication, you could do something like:
src="javascript:void(0);"
or
src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
(The above is actually a base64 encoded GIF image, that is a 50x50 image. You could use a smaller GIF image or probably get away with just "data:" to avoid doing anything.)
also no need to create an anonymous function to call something onload, you can pass it by reference.
also provided a dojo-version, illustrating how similar the syntax can be:
(function($, $$){
var selector = "img[src='http://fpoimg.com']";
// jQuery version
function loadFPOImagesJQ() {
var fpoImages = $(selector);
fpoImages.each(function(){
var t = $(this);
var src = [t.attr("src"), "/", t.attr("width"), "x", t.attr("height"), "/", t.attr("alt")].join("");
t.attr("src", src);
})
}
// dojo version
function loadPFOImagesDojo(){
var fpoImages = $$(selector);
fpoImages.forEach(function(n){
var t = $$(n);
var src = [t.attr("src"), "/", t.attr("width"), "x", t.attr("height"), "/", t.attr("alt")].join("");
t.attr("src", src);
})
}
// jquery
$(document).ready(loadFPOImagesJQ);
// dojo
dojo.ready(loadPFOImagesDojo);
})(jQuery, dojo.query);
also noticed I repeat myself with the var src = ... bit, so both could be adjusted to be:
t.attr('src', fix(t));
and function fix(t){
return [t.attr('src'), .... ].join("");
}
could be used for both examples.
Regards
for (var i=fpoImages.length,src;i--;) {
src=['http://fpoimg.com',"/",fpoImages[i].width,"x",fpoImages[i].height,"/",fpoImages[i].alt].join('')
fpoImages[i].src=src;
}