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


 

Javascript Detect IE Browser

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0){
  // Do Something
}



UPDATE FOR IE 11

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
  // Do Something
}



DETECT IE VERSION
 
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0){
   var version = parseInt(ua.substring (msie+5, ua.indexOf(".", msie)))
   if(version <= 9) {
     // Do Something 
   }
}