Ladda in en bild med superenkel preloader

Jag omformulerar min fråga:

Hur skriver man för att ladda en bild dynamiskt med "var myImage = new Image;" och sen vänta tills den laddats klart för att då visa den.

Det jag vill är att den ska skriva ut lite kod när man klickar som visar en gif som visar att den laddar, sen när den är laddad ska giffen bort och bilden in.

<script type="text/javascript">

function showImg(src){
  var elm = document.getElementById("loader");
  elm.style.visibility = "visible";

  var img = new Image();
  img.onload = function(){
    elm.style.visibility = "hidden";
    document.images["img"].src = this.src;
  }
  img.src = src;
}

</script>

<div id="loader" style="visibility:hidden;position:absolute;width:200px;height:100px;left:50%;top:50%;margin-left:-100px;margin-top:-50px;border:2px solid #777;background-color:#eee">Laddar-bild här</div>
<a href="javascript:showImg('foo.png')">Visa bild</a>

<img src="" name="img">

Ah! img.onload var det jag sökte :)