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

问题描述 投票:0回答:1

我想从链接加载图像:

1)点击“a href”,从href / src / id中提取图片网址

2)链接应该在加载Image时消失并显示Ajax-Loader Image。

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

});

有人知道如何完成这项任务吗?我很感激任何帮助。

javascript jquery ajax href loading
1个回答
1
投票

你可以使用replaceWith

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

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

© www.soinside.com 2019 - 2024. All rights reserved.