显示图像的加载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