Question

我想在加载图片的网址上显示加载。我知道可以在加载时显示加载像这样的图像：

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

但我不希望每次只想更改 src 时附加img元素，并在加载该图像的 url 时显示加载。有可能吗？

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

在图像的加载URL上显示加载

1 个答案: