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>

<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.


comments powered by Disqus