jQuery AJAX Loading – Display Images or Text Until Script is Finished

August 7, 2013 • 1 min read

javascript

This is a simple way to display an image or text while an AJAX request is loading. View Demo What we’re basically doing is forcing a div to have a starting image and then replacing it with the data return from the AJAX request.

<button id="save">Load User</button>
<div id="loading"></div>

<script>
$('#save').click(function () {
  // add loading image to div
  $('#loading').html('<img src="loading.gif"> loading...');

  // run ajax request
  $.ajax({
    type: "GET",
    dataType: "json",
    url: "https://api.github.com/users/jveldboom",
    success: function (d) {
      // replace div's content with returned data
      $('#loading').html(d);
    }
  });
});
</script>

If you need an image to use for your loading.gif, checkout preloaders.net or ajaxload.info.