Display Loading Image when AJAX call is in Progress

When an AJAX request is sent to fetch records from the server then it may take time depending on the data processing or the number of records.

If the AJAX request takes more time then at the Client-side there is no visible change is been displayed and the user doesn’t know whether its request is in progress or not.

You can display a loading image or text message on the page when the AJAX request is in progress and hide it after getting a response.

In the demonstration, I am displaying a loading image when sending an AJAX request.

---

Contents

1. beforeSend and complete
2. .ajaxStart() and .ajaxComplete()
3. Conclusion

---

1. beforeSend and complete

beforeSend

This executes before AJAX request is called.

Syntax –

$.ajax({
 ...
 beforeSend: function(){
  // Statement
 }
 ...
});

---

complete

This executes when AJAX request is finished whether it successfully callback or not.

Syntax –

$.ajax({
 ...
 complete: function(){
  // Statement
 }
 ...
});

---

Example

Write a script to sends an AJAX request when a button gets clicked to search entered value in MySQL Table.

Show loading image on beforeSend and hide it in complete.

<script type='text/javascript'>

$(document).ready(function(){
 
 $("#but_search").click(function(){
  var search = $('#search').val();

  $.ajax({
   url: 'fetch_deta.php',
   type: 'post',
   data: {search:search},
   beforeSend: function(){
    // Show image container
    $("#loader").show();
   },
   success: function(response){
    $('.response').empty();
    $('.response').append(response);
   },
   complete:function(data){
    // Hide image container
    $("#loader").hide();
   }
  });
 
 });
});
</script>

<input type='text' id='search'>
<input type='button' id='but_search' value='Search'><br/>

<!-- Image loader -->
<div id='loader' style='display: none;'>
  <img src='reload.gif' width='32px' height='32px'>
</div>
<!-- Image loader -->

<div class='response'></div>

---

2. .ajaxStart() and .ajaxComplete()

This is another form which you can use.

.ajaxStart()

Same as beforeSend it executes before AJAX request is being sent.

Syntax –

$( selector ). ajaxStart( function() {
 // Statement
});

---

.ajaxComplete()

Executes when AJAX request finished same as complete it also doesn’t depend on whether it’s successful or not.

Syntax –

$( selector ). ajaxComplete( function() {
 // Statement
});

---

Example

Using ajaxStart to show the loader image and ajaxComplete for hiding.

$(document).ajaxStart(function(){
  // Show image container
  $("#loader").show();
});
$(document).ajaxComplete(function(){
  // Hide image container
  $("#loader").hide();
});

---

3. Conclusion

It is a good idea to show loader on the screen when you are fetching large content from your server. By this, the users know that the request is in progress and wait for completing the request.

You can use any one of the form (beforeSend, complete or ajaxStart,ajaxComplete) they work the same way.

If you found this tutorial helpful then don't forget to share.