×

Please Login or Register to continue.

3
(3.7K 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.

(4.3K Points)
in jquery

Share

3 Answers
(3.4K Points)
1

The jQuery library was designed to reduce JavaScript code lines. You can hide and show any image format like gif, png, jpg, or jpeg using jQuery. If you want to display a loader image then use the jQuery show() method. The show() method is used to display div blocks,paragraphs,images etc. It means you can display everything using the jQuery show() method.

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.


Comment

(9.4K Points)
(edited)
1

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. 


Comment

(7.3K Points)
0

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. 


Comment

Related Questions :-

Your Answer

You can post your answer after login..