DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Show loading icon in JQuery Ajax request

Show loading icon in JQuery Ajax request

Sachin Khosla user avatar by
Sachin Khosla
·
Oct. 03, 11 · Web Dev Zone · Interview
Like (0)
Save
Tweet
27.93K Views

Join the DZone community and get the full member experience.

Join For Free

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/

Icon (programming language) Requests JQuery

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • After Inspection, Comes Adaptation: How to Do Action-Based Retrospectives Right
  • How the TypeScript ReturnType Works
  • Cypress: The Future of Test Automation! Advantages and Disadvantages
  • Java Outsourcing, a Strong Business, and Management Approaches

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo