How to prevent users from repeatedly clicking on a linked image?

Question

I have a page with a linked image where the link takes a little time to load. Therefore, users click on it several times. This sometimes leads to errors in the code. How to prevent users from clicking on the link more than once?

In an attempt to fix this, I changed the link to the onClick event, and then in the function in which I used the code:

$('#myImageId').unbind('click'); window.location.href = "myLink"; 

However, this does not seem to help. Also, I would prefer to keep this simple linked image instead of using javascript.

Answer 1

As soon as the solution is to add a class to the element that is used as a flag to define the code, it must be executed.

Here is an example: http://jsfiddle.net/qLhr8/

 $('#myImageId').click(function() { var $th = $(this); if( !$th.hasClass( "pending" ) ) { // Add the "pending" class, so subsequent clicks will not // run the code inside this if() $th.addClass( "pending" ); window.location.href = "myLink"; // you could do a setTimeout to remove the class // if the new page never loads } }); 

With the class added, you can also change the appearance of the image (possibly lower its opacity) to indicate that it should not be repeated.

 .pending { opacity: .4; filter:alpha(opacity:40); cursor: wait; } 

Answer 2

 <img src="..." id="myImageId"> $('#myImageId').bind('click', function() { $(this).unbind('click'); /* do long time task.... }); 

If your image is wrapped in a link, the code will be

 <a href="#"><img src="..." id="myImageId"></a> $('#myImageId').parent().bind('click', function(evt) { $(this).unbind('click'); /* do long time task.... evt.preventDefault(); }); 

Answer 3

CSS hacker solution that may / may not work: create another image element without a link and make it related to this link, for example:

 <div> <a href="http://www.long-loading.com" id="link"><img src="my_img.png" id="img_link" alt="GO" /></a> <img src="my_img.png" id="img_nolink" alt="GO" /> </div> 

Now apply this CSS:

 #img_nolink { display: none; position: relative; top: -200px; /* Height of the image */ } #link:active + #img_nolink { display: block; } 

When you click on a link (theoretically) this should show an image without a link.