How can I display loader image on button click in jQuery?

Question

How can I display loader image on button click in jQuery?

3

(4K Views)

I am working on a project using AJAX with the jQuery library. I am a beginner in JavaScript (jQuery library). I have a loader gif image. I want to display the loader image on a button click. Is there any method to show the loader image on submit button click?

For example -

<!DOCTYPE html>
<html>
<head>
    <title>How to display image on button click in jQuery?</title>
</head>
<body>
    <form>
       <img src="loader.gif" id="loader" style="display:none;"><br> 
       <button type="button" id="submit_form"> Submit</button>
    </form>
</body>
</html>

In the above code, the loader image is non-display using inline CSS. I want to display or show this loader image on button click.

html javascript jquery js

priyasharma4005 (4.3K Points)

15 Oct 2022 in jquery

Answer

Share

3 Answers

Comment

How to display loader image using jQuery on button click?

The loader image format is a gif format. You have to create a Click event to show a loader gif image using the loader image id and button id.

Let's display the loader image if you made it display none using inline CSS, Internal CSS, or external CSS. The method will be the same for all.

<!DOCTYPE html>
<html>
<head>
    <title>Show loader gif image using jQuery.</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
     $("#submit_form").click(function()
     {
        $("#loader").show();

     });
        });
</script>
<body>
    <form>
       <img src="https://technosmarter.com/qa/assets/images/loading.gif" id="loader" style="display:none;"><br> 
       <button type="button" id="submit_form"> Submit</button>
    </form>
</body>
</html>

Execute the above code on your browser. In the above code, I created a click event on a button click using jQuery.When a user clicks on submit button, the loader image is displayed using the jQuery show() method.

shakti · Answer 2 · 2022-10-18T20:29:27+0000

The jQuery library is created for less code writing. You can write less and get more using jQuery. There are a lot of readymade methods in the jQuery library. A loader image can be inside a div block or outside a div block, you can display or show using the jQuery() show method. The show() method is used to display kinds of modules using the id or class. We can easily display any image, div block, span, paragraph, popup, etc using the show() method in jQuery.

If you want to display a loader image or any image then use the show() method in jQuery-

For example-

$("#loader").show();

loader - loader is an id of a loader gif image.

show() - show() is a jQuery readymade method.

You can use loader image class instead of id.

For example -

$(".loader").show();

Use the dot (.) symbol.

How to show loader image on button click -

It's a very interesting topic in jQuery.

You can execute the same show() function with a button click.

<script type="text/javascript">
    $(document).ready(function(){
     $("#my_btn").click(function()
     {
        $("#loader").show();

     });
        });
</script>

my_btn - Submit button id.

As you know in JavaScript, we can create a function and execute an onClick event.

You can execute showloader() user-defined function onClick event.

 <button type="button" id="submit_form" onClick="showloader();"> Submit</button>

The function will execute and display the loader image.

vishalrana1 · Answer 3 · 2023-02-27T15:55:24+0000

Why don't you use the jquery html() or append() method on button click?

We will set the loader gif image in JS code and display it on button click in HTML.

<!DOCTYPE html>
<html>
<head>
   <title>Append loader gif image in jQuery</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
     $("#submit_form").click(function()
     {   
         $("#loader").html('<img src="https://technosmarter.com/qa/assets/images/loading.gif">');
         //$("#loader").append('<img src="https://technosmarter.com/qa/assets/images/loading.gif">');
     });
        });
</script>
<body>
	<div id="loader"> </div>
    <form>
       <button type="button" id="submit_form"> Submit</button>
    </form>
</body>
</html>

You can use the append () or html() method to append a loader gif image to an id. The loader image will be append and displayed on button click.

How can I display loader image on button click in jQuery?

How to display loader image using jQuery on button click?

How to show loader image on button click -

Related Questions :-

Live Chat