单击 Link 后使用 jQuery 加载图像

Question

我想从 Link:

加载图像

1) 单击 "a href"，从 href/src/id

中提取图像 url

2) Link 应该在加载图像时消失并显示 Ajax-Loader 图像。

3) 显示加载的图片。

如果可能的话，我不想使用任何按钮或 div- 构造来输出图像 - 只有一个简单的 link.

点击：

<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。

单击 Link 后使用 jQuery 加载图像

Loading an image with jQuery after clicking a Link

javascript

ajax

jquery

loading

href