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