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

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>

$('#save').click(function () {
    // add loading image to div
    $('#loading').html('<img src="loading.gif"> loading...');
    // run ajax request
        type: "GET",
        dataType: "json",
        url: "https://api.github.com/users/jveldboom",
        success: function (d) {
            // replace div's content with returned data

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

comments powered by Disqus