Question 46174 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to display loader image in javascript – Jquery

Hello everyone I am working with javascript, Right now i want to display "loader-image" after click on button, so how can i do this ?
Here is my image url

https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.gif

And here is my current code

jQuery('#double_click_submit').click(function(event) {
//want to display loader (url menitoned above)
});
Tags:

3

Answers


  1. 0

    You can hide the loader by default and show it whenever you press on the button like this:

    jQuery('#double_click_submit').click(function(event) {
  event.preventDefault();
  jQuery('#loader').show();
});
    #loader {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="loader">
  <img src="https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif?cid=ecf05e47v26jax2ovrxmxvzz6eb35pjoa6j5uhmyy459oj4y&rid=giphy.gif&ct=g" alt="Loading...">
</div>

<button id="double_click_submit">Click me to load!</button>
    Login or Signup to reply.
  2. 0 
     jQuery('#double_click_submit').click(function(event) {
  jQuery('body').html('<img src="https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.gif">');
});

    if you want to show it at the top of the page ( I used body but if you want to insert at the beginning of any class or id, you can use that instead)

    jQuery('#double_click_submit').click(function(event) {
  jQuery('body').prepend('<img src="https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.gif">');
});
    Login or Signup to reply.
  3. 0

    To display a loader image after clicking on the button using jQuery, you can follow these steps:

    1. Select the image element and store it in a variable:

      var loaderImage = $(”, {
      src: ‘https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.gif’
      });

    2. Append the loader image to the container where you want to display it:

      jQuery(‘#container’).append(loaderImage);

    Replace #container with the ID or class of the element where you want to display the loader image.

    3.Add the loader image to the click event handler for the button:

    jQuery('#double_click_submit').click(function(event) {
    // Add the code to display the loader image
    jQuery('#container').append(loaderImage);
    
    // Add the code to perform the button click action
    // ...
});

    This will add the loader image to the container when the button is clicked.

    Note: If you want to hide the loader image once the button click action is complete, you can use the hide() method to hide the image:

    loaderImage.hide();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search