Показать загрузку по загрузке URL-адрес изображения

Question

Я хочу показать loading при загрузке URL-адрес изображения не нагрузка изображения. я знаю, что это возможно, чтобы показать, нагрузка на нагрузке изображение вроде этого:

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

, но я не хочу, чтобы добавить элемент IMG Согласовать каждый раз, когда я просто хочу, чтобы изменить Src и показать загрузку при 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

любая идея? i google, но ничего не найдено об этом!

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