javascript - 在图像的加载 url 上显示正在加载

Question

我想在加载图像的网址时显示正在加载，而不是在加载图像时显示。我知道可以在加载图像时显示加载，如下所示:

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

但我不想每次我只想更改 src 并在加载该图像的 url 时显示加载时附加 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

您可以使用Image的onload事件

$('#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