Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show (Display) Loading Image on Button Click Example

Nov 30, 2015
Introduction

Here I will explain how to use
jQuery to show loading on button click or display loading image on button click with example in jQuery. By using button html property we can show loading image on button click in jQuery.


To show loading image on button click in jQuery we need to write the code like as shown below


<script type="text/javascript">
$(function () {
$('#btnloading').click(function () {
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
})
})
</script>

If you want to check it in complete example you need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery show loading image on button click example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btnloading').click(function () {
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
return false
})
$('#btnreset').click(function () {
$('#btnloading').html('Click to Set Loading Image')
})
})
</script>
</head>
<body>
<form id="form1">
<div>
<button id="btnloading" >Click to Set Loading Image</button>
<button id="btnreset" >Reset</button>
</div>
</form>
</body>
</html>

Live Demo

Check following demo to show loading image on button click in jQuery




If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

4 comments :

mohanty said...

Nice Article Sir. But only the problem is the loading is for infinite time.But how can we restrict so that as soon as the code behind Execution completes the loading image should be vanished.

Unknown said...
This comment has been removed by a blog administrator.
Vinish Blog said...

good

Anonymous said...

NICE

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.