CODEWITHSUNDEEP
javascriptjqueryhtmlhyperlinkpreloader
Nathan
Nathan

Reputation: 1354

Show preloader image when clicked on <a> tag?

I would like all HTML link (<a href=...) tag to show an image (GIF preloader) center of the screen when clicked. Currently, I have a code that shows a loading progress bar but it only shows when that page is loaded. I want the GIF preloader to show immediately after user clicked on a link.

What code and where do I need to add?

Upvotes: 2

Views: 1913

Answers (3)

JMD
JMD

Reputation: 53

use jquery .imageloader()

<img class="img" src="image.png" />
<script>
$(function() {
$('.img').imageloader();
});
</script>

add the function to a button

Hope this helps.

Visit here for loads of examples.

.imageloader()

try this out

Upvotes: -1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

$(function(){
    $('a').on('click',function(e){
       $('<img src="image-pat/img.gif" class="image-loader"/>').appendTo('body');
       // ....
       // your code
       // ....
       if($('.image-loader').length) { // check length to remove image-loader again
          $('.image-loader').remove();// use, if you want to remove the loader again
       }
       return true;
    });
});

Upvotes: 0

John Kentucky
John Kentucky

Reputation: 886

You have to preload the image. To do that, either create an image element and hide the image, only show on click.

OR

You can call createElement on the document ready function and set its source like below:

var elem = document.createElement("img");
elem.setAttribute("src", "images/my_image.jpg");

Then, when you use that source elsewhere, it would show the image immediately as its already loaded by browser.

Upvotes: -1

Related Questions