单击链接后使用jQuery加载图像

Question

我想从链接中加载图片：

1）点击“ a href”，从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 +'">');

但是，您显示加载图像的方法将无法正常工作。您应该在代码中添加prefetching logic，并在获取图像后使用replaceWith。