实际图片加载之前的Ajax加载器图片

Question

我的图片酒店在尝试加载大尺寸图片时花了点时间。如何在实际加载图像之前设置Ajax Loader GIF图像，以使我的用户了解如何等待。谢谢。

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

的jsfiddle：http://jsfiddle.net/52dY7/

Answer 1

的simpliest方法是在启动与目标图像的源装载机图像。

<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); 
    }); 
});