Preloading Images

HTML

<img src="http://loadinggif.com/images/image-selection/32.gif" large-src="http://www.planwallpaper.com/static/images/518079-background-hd.jpg" large-class="fancyImg">

CSS

.fancyImg {
  width: 500px;
  height: 500px;
}

JavaScript

$('img[large-src]').each(function() {
  var img = $(this);
  var newimg = new Image();
  newimg.src = img.attr('large-src');
  newimg.setAttribute('class', img.attr('large-class'));
  newimg.onload = function() {
   img.replaceWith(newimg);
  };
});