How to display loading image on ajax call in JQuery?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i would like to share you how to Display loading image on ajax call in JQuery. Sometimes, we have need to display a loading image or any animation or text when we fire every ajax request. It is not for only one ajax request, but if sometimes we want to load image on our every ajax request then we can do that by using bellow example.

Here I will use ajaxStart() and ajaxComplete() function for show the image until All POST or GET Ajax request. This both function will be execute one each $.ajax request.

Example:

<script type="text/javascript">
    $(document).ready(function()
    {
        $(document).ajaxStart(function(){
	    	$('#process_img').css("display", "block");
	});
	$(document).ajaxComplete(function(){
		$('#process_img').css("display", "none");
	});
    });
</script>

Read Also : How to convert Object into Array in PHP?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →