顯示圖像的加載url上的加載

Question

我想顯示一個加載加載圖像的網址未加載圖像。我知道這可能顯示對裝載的裝載這樣的圖像：

var $img = $('<img id="img" src="' + src + '" />'); 
$img.on('load', function() { 
    // hide loading 
}); 

，但我不希望每次我只是想改變SRC和顯示裝載追加一個img元素時的網址該圖像正在加載。可能嗎？

$('#ThumbnailSlide img').each(function() { 
    $(this).click(function() { 
    var src = $(this).attr('data-href'); 
    // i want to show a loading when src is loading 
    $('#img').attr('src',src); 
    }); 
}); 

JSFiddle

什麼想法？ 我谷歌，但沒有發現它！

Answer 1

可以使用onload事件的Image

$('#ThumbnailSlide img').click(function() { 
    //Show loading 
    $('#loading').show(); 

    //get 
    var src = $(this).data('href'); 


    var img = new Image(); 

    //Set src to load image 
    img.src = src; 

    img.onload = function() { 
     //Update src property 
     $('#img').prop('src', img.src); 

     //Hide loading 
     $('#loading').hide(); 
    } 
}); 

Fiddle