Preload Image with JQuery

Use preload image to check if image is loaded, and if image not yet loaded don't hide spiner until image is loaded.

HTML LOADER

<div id="dvLoading" class="block">
  <img src="ajax-loading.gif" alt="loader" />
</div>


JQUERY

$(window).load(function() {
  $.fn.preload = function() {
    var count = 0,
    total = $(this).length;
    this.each(function(){
      $('<img/>').attr('src', this).load(function() {
         $(this).remove();  // prevent memory leaks as @benweet suggested
         if(++count === total) {$('#dvLoading').fadeOut(1000);}
      }
    }
  }

  // Images List
  $([ 'http://example.com/image1.png',
       'http://example.com/image2.png',
       'http://example.com/image3.png']).preload();
});


SOURCE:

http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded

http://stackoverflow.com/questions/12810878/jquery-load-all-images-inside-div-before-display