Loading spinner on Ajax call

Question

I currently have an ajax script to fetch a query file and load new content from that file on database update. However how would I go about adding a loading spinner to the script?

 < div id = "AjaxLoader" > < h1 > Loading < /h1> </div > < div id = "feed_main_load" > < /div> 

 var $loading = $('#AjaxLoader').hide(); $(document) .ajaxStart(function () { $loading.show(); }) .ajaxStop(function () { $loading.hide(); }); $(document).ready(function() { $("#feed_main_load").load("elements/feedloadtest.php"); var refreshId = setInterval(function() { $("#feed_main_load").load("elements/feedloadtest.php?" + 1*new Date()); }, 60000); }); 

Answer 1

What you have to do is to show the spinner before you call $.load,

and hide it in completion callback.

You have here a full snippet:

  $(document).ready(function() { $(img).hide(); $("#feed_main_load").load("elements/feedloadtest.php"); $(img).show(); var refreshId = setInterval(function() { $("#feed_main_load").load("elements/feedloadtest.php?" + 1*new Date(), function(){ $(img).hide(); }); }, 60000); }); 

 <img src="https://d13yacurqjgara.cloudfront.net/users/135058/screenshots/950508/spinny_2x.gif" width=64 height=64/> <div id="feed_main_load"> </div>