使用.load（）實現JQuery / Javascript圖像庫的加載器映像;

Question

我使用下面的代碼作為圖像庫，並希望在加載圖像時在后台顯示加載程序gif，然后在加載圖像后將其刪除。

做這個的最好方式是什么？

注意：我之前附加了.fadeIn()和.fadeOut()並沒有太多運氣（似乎兩者同時出現。

    $('ul a').click(function(e) {
        e.preventDefault();
        var src = $(this).attr("href");
        $('#main-img img').fadeOut(400,
        function() {
            $('<img/>').attr('src', src).load(function() {                  
                $('#main-img img').attr('src', this.src).fadeIn(400);
            })
        })
    });                                          

Answer 1

我把一個似乎正在工作的JSFiddle放在一起（紅色是你的加載圖像）。 也許您在DOM完全加載之前注冊了您的點擊？ 我唯一看到的不同就是我在Document Ready上注冊了它。

http://jsfiddle.net/sSt3x/2/

請注意，圖像非常大（4000x4000左右），所以給它一點時間，第一個圖像不會褪色，所以最初加載需要一些時間。 根據您的行為進行調整。