Hey J-Lo, where did LowSRC go?

Remember the IMG element’s LowSRC attribute?  Unfortunately, no modern browser does!  While the big ones used to offer this for the slower folks among us, they have all dropped support for it.

I need it again, though!  A current project calls for a (just) 320×280 high-color illustration with alpha-transparency – nothing other than a full 32-bit alpha-channel PNG will do that justice.

Out of the editor, it’s 160KB, which is huge for homepage decoration.  A good PNGCrushing got that down to 106KB, which is still 16 seconds on 56K.  Oh, and there’s the rest of the page too…

A pinch of JQuery and classic Javascript later, and LowSRC works again!

$(function() {

  // jLowSRC - Rob Eberhardt (@slingfive.com), May 2009
  $("IMG[lowsrc]").each(function() {
    if (this.readyState=='complete' || this.complete==true) { return }

    var lowsrc = $(this).attr('lowsrc');
    this.lowsrcElem = this;
    if ($.browser.msie && $.browser.version <7 && lowsrc.toLowerCase().indexOf('.png') >-1) {	//IE6
      $(this).wrap('<span></span>');
      this.lowsrcElem = this.parentNode;
      this.lowsrcElem.style.display = 'block';
      this.lowsrcElem.style.width  = this.offsetWidth;
      this.lowsrcElem.style.height = this.offsetHeight; 
      this.lowsrcElem.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +lowsrc+ "')";
      this.style.visibility = 'hidden';
    } else {
      this.lowsrcElem.style.background = 'url(' +lowsrc+ ') no-repeat 0 0';
    }

    this.onload = function() {
      this.lowsrcElem.style.background = '';
      this.lowsrcElem.style.filter = '';
      this.style.visibility = 'visible';
    }
  });

});

It works in Firefox 3, Chrome, Safari 3, Opera 9, IE 7 and 8.  I also got it handling IE 6 (with a small re-flow jump to the final image), which is the bulk of the code.  (Dear 33% of the world, your web browser is 800 years old and eating our brains.  Broadband isn’t free, but newer browsers are.)

For testing, I simulated modem speeds and “first loads” (disabled cache) with the brilliant Fiddler2.  It’s not just a noticeable improvement, it’s the difference between getting sandwich or sticking around.

Hope it helps someone else!