實際圖片加載之前的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); 
    }); 
});