Show loading icon in JQuery Ajax request

JQuery is the most used Javascript framework. It’s exceptionally simpler and famous. The best part of JQuery is that it has very nicely done documentation and lot many resources available online.

Lately, while doing one of my codeigniter I used JQuery and wanted to share a little snippet of code over here. This code helps you to show a loading icon while your Ajax request is being processed in the background.

JQuery has various events associated with Ajax request which can be associated with a set of functions or used to perform certain action(s). From the list of events we are going to use two global functions called ajaxStart & ajaxStop. By global we mean, that you can call it outside the Ajax function i.e. whenever the Ajax request is triggered these functions will be triggered automatically. Since these have global scope, these functions could be present at any part of the script, not necessarily inside the Ajax function. Apparently, this can help manipulation many HTML elements while doing the Ajax operations.

Similarly, we are going to use these two functions to show the loading icon while the Ajax request is processing. Following is the code snippet, which we are going to use.

<script>
// Assuming that the div or any other HTML element has the ID = loading and it contains the necessary loading image.
   $('#loading').hide(); //initially hide the loading icon
 
        $('#loading').ajaxStart(function(){
            $(this).show();
            //console.log('shown');
        });
        $("#loading").ajaxStop(function(){
            $(this).hide();
            //  console.log('hidden');
        }); 
</script>

Initially, we hide the loading icon on the page load using the JQuery’s hide() method. After that we define the above mentioned functions ajaxStart & ajaxStop. When an Ajax request is fired the global event ajaxStart is also fired and hence the associated function is called (as defined above). In this function we are going to show the loading icon using JQuery’s show method. In the same way when the Ajax request is completed successfully and it’s done, it will fire the ajaxStop event. In this function we are going to hide this loading icon and let the real content show inside the div.

There could be many ways to hide/show these elements i.e. you can put some animations etc. Also there would be totally different logic to show the Loading icons, but the best one is which works for you and is easier to impelement. So keep sharing your thoughts and the awesome code.

For now, I am hoping this code snippet would share few minutes of googling different websites.

From http://www.digimantra.com/technology/javascript/show-loading-icon-jquery-ajax-request/