Загрузка изображения с помощью jQuery после нажатия на ссылку

Question

Я хочу загрузить изображение по ссылке:

1) Нажмите на ссылку "href", извлеките URL-адрес изображения из href / src / id

2) Ссылка должна исчезнуть и отобразить изображение Ajax-Loader при загрузке изображения.

3) Показать загруженное изображение.

Если возможно, я не будухотите использовать любые кнопки или div-конструкции для вывода изображения - только простая ссылка.

При нажатии:

<a class="loc" href="./misc/images/image1.png"></a>

Браузер должен выводить изображение:

<img src="./misc/images/image1.png" />

пока я сделал это:

$('a.loc').text('load image').css("cursor","pointer");
$('.loc').click(function(){

  $(".loc").fadeOut(300);
  $(".loc").html('<img src="/images/ajax-loader.gif" />');
  var image = $(this).attr('src');

  *** how to show/load image, how to use my var ??? ***

});

Кто-нибудь знает, как выполнить эту задачу?Я очень благодарен за любую помощь.

Answer 1

Вы можете использовать replaceWith :

var image = $(this).attr('src');
$(this).replaceWith('<img src="'+ image +'">');

Однако ваш способ показать загрузочное изображение больше не будет работать.Вы должны добавить логику предварительной выборки к своим кодам и использовать replaceWith после получения изображения.