jQuery AJAX Loading...

Display Images or Text Until Script is Finished

by gk

HTML

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

<!--
source:
http://johnveldboom.com/posts/jquery-ajax-loading-display-images-or-text-until-script-is-finished/
-->

JavaScript

$('#save').click(function () {
    // add loading image to div
    $('#loading').html('<img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif"> loading...');
    
    // run ajax request
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "https://api.github.com/users/domesticempire",
        success: function (d) {
            // replace div's content with returned data
            // $('#loading').html('<img src="'+d.avatar_url+'"><br>'+d.login);
            // setTimeout added to show loading
            setTimeout(function () {
                $('#loading').html('<img src="' + d.avatar_url + '"><br>' + d.login);
            }, 2000);
        }
    });
});