實際圖像加載之前的Ajax加載器圖像

Question

我的圖片酒店在嘗試加載大尺寸圖片時花了點時間。 如何在實際圖像加載之前設置Ajax Loader GIF圖像，以使用戶理解等待。 謝謝。

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