Basic Image Preloader

by Taufik Nurrohman

HTML

<div></div>

<ul>
    <li><a href="http://4.bp.blogspot.com/-Wq2lmWDGWdw/T1y4s6ceeLI/AAAAAAAACT8/-0VSbQHbgGc/s72-c/ss-hompimenu.png">Gambar 1</a></li>
    <li><a href="http://3.bp.blogspot.com/-8TeB0uRII1c/Tz_JF8JigpI/AAAAAAAACLA/sc0G06nSSxA/s72-c/nivo-slider.png">Gambar 2</a></li>
</ul>

CSS

body {
  padding:50px;  
}

div {
  width:72px;
  height:72px;
  border:4px solid black;
  background-color:#ccc;    
}

JavaScript

$('ul a').click(function() {
    $('div').html('<img src="' + this.href + '" alt="Loading..."/>');
    return false;
});