Display an animated gif after clicking the link to go to the third-party web page with slow loading

Question

My site links to a Paypal purchase page, which loads slowly. I would like to display an animated gif after the user clicks on the link included in PayPal until a new PayPal page loads.

Thanks in advance.

Answer 1

I see that you flagged the question using jQuery, which is a great way to do this, as Kerry suggested.

With jQuery, this is very simple:

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

And your html will look like this

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

You will hide the “load” class in your CSS when the page loads (possibly with a display: none;) and then show it with jquery.

There are several ways to do this, just take this as a starting point.

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

Answer 2

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

Answer 3

If you want to do this without jQuery ...

Suppose you have an animated image on your page hidden with CSS (display: none;)

Then, through your link, you will do:

 <a href="#" onclick="document.getElementById('loaderimage').style.display='';">Click Here</a> <img src="loading.gif" id="loaderimage" alt="" style="display:none;" />