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

Posted 2023-03-05

【中文标题】单击链接后使用 jQuery 加载图像

【英文标题】：Loading an image with jQuery after clicking a Link

【发布时间】：2019-07-06 03:37:12

【问题描述】：

我想从链接加载图像：

1)点击“a href”，从href/src/id中提取图片url

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 ??? ***

);

有人知道如何完成这项任务吗？非常感谢您的帮助。

【参考方案1】：

你可以使用replaceWith:

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

但是，您显示加载图像的方法将不再有效。您应该在代码中添加一些prefetching logic，并在获取图像后使用replaceWith。