Display animated gif after clicking link to go to a slow loading third party webpage.

Question

My site links to a paypal buy it now page that loads slowly. I would like to display an animated gif after the user clicks the paypal embeded link until the new paypal page loads.

Thanks in advance.

Answer 1

Use javascript so that the "onclick" event either replaces the image or adds on a new image. I suggest using jQuery's either .replaceWith('<img ...') or .append('<img ...')

Answer 2

I see that you tagged the question with jQuery, which is a great way to do it like Kerry suggested.

With jQuery this is really simple:

$("#paypalLink").click(function(){
      $(".loading").show();
}

And your html would look like this

<a href="http://paypal.com/whateverelse" id="paypalLink">Pay with Paypal</a>
<img src="loading.gif" class="loading" />

You'd hide the "loading" class in your css when it the page loads( perhaps with display:none;), then show it with the jquery.

There are a number of ways that you can do this, just take this as a starting point.

For the jQuery click api go here => http://api.jquery.com/click/

Answer 3

In case you want to do this without JQuery...

Let's assume you have the animated image on your page hidden with CSS (display:none;)

Then on your link you would do:

<a href="#" onclick="document.getElementById('loaderimage').style.display='';">Click Here</a>

<img src="loading.gif" id="loaderimage" alt="" style="display:none;" />