i miss the lowsrc attribute

lowsrc was great, but it never made it into the new HTML specs. What, are we supposed to have infinite bandwidth and super mega quantum servers in 2006 such that images transfer in infinitesimal time? Here's a cute little javascript function of getting that sweet lowsrc functionality back.

First define the function lowsrc:

function lowsrc(i,url) {
	i.onload = null;
	var im = new Image();
	im.src = url;
	i.src = im.src; 
}

Then just call it with the onload attribute, reversing the order of your main and lowsrc images, e.g.:

<img onload="lowsrc(this,'/services/slowimage');" src="/static/images/lowsrc.png"/>

This makes my dynamically generated images display something purty while they generatificate. Yeah!

If you're generating images on the fly and want some Level 2 DOM love, try a lowsrc function like this:

function lowsrc(img,url) {
	var im = new Image();
	im.myimg = img;
	im.addEventListener("load",function(e) { 
		e.currentTarget.myimg.src = e.currentTarget.src;
		} , false);
	im.src = url;
}

var img = document.createElement('img');
img.src = '/static/images/lowsrc.jpg';
lowsrc(img,slowurl);