Ajax loader изображение перед фактическим загружаемым изображением

Question

Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Изображение Как настроить изображение GIF для Ajax Loader перед загрузкой фактического изображения, чтобы мои пользователи поняли, что ждать. Благодарю.

$(document).ready(function() { 
    window.showim = function(src) { 
     $("#imgLoader").attr("src", src); 
    }; 
}); 

JSFiddle: http://jsfiddle.net/52dY7/

Answer 1

Самый простой способ начать с погрузчиком изображения в источнике целевого изображения.

<img id="imgLoader" src="path/to/your/loader.gif" /> 

Смотри здесь ... http://jsfiddle.net/xflofoxx/52dY7/2/

Answer 2

$(document).ready(function() { 
    $('img').each(function() { 
     var $img = $(this), 
      origSrc = $img.attr('src'); 

     $img.attr('src', '/path/to/loader/image'); 

     $('<img />').on('load', function() { 
      $img.attr('src', origSrc); 
     }).attr('src', origSrc); 
    }); 
});