0

I would like to load an image from a Link:

1) Click on "a href", extract image url from href/src/id

2) Link should dissapear and show Ajax-Loader Image while loading Image.

3) Display loaded image.

If it's possible i dont want to use any buttons or div-constructs to output image - only a simple link.

On Click:

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

Browser should output an image:

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

so far i made this:

$('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 ??? ***

});

Has anybody an idea how to complete this task? I'm, greatful for any help.

user2987790
  • 135
  • 8

1 Answers1

1

You may use replaceWith:

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

However your method to show a loading image will not work more. You should add some prefetching logic to your codes and use replaceWith after fetching image.

Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82