CODEWITHSUNDEEP
javascriptjquery
Pedram
Pedram

Reputation: 16615

Show loading on load url of an image

I want to show a loading on load url of an image not on load an image. i know it possible to show loading on load an image like this:

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

but i don't want to append an img element each time i just want to change src and show loading when url of that image is loading. is it possible?

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

any idea? i google it but nothing found about it!

Upvotes: 0

Views: 437

Answers (1)

Satpal
Satpal

Reputation: 133433

You can use onload event of 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

Upvotes: 2

Related Questions