how do I add a loader to this jquery ajax function -

i have following html

<a href="/loadme.html" class="next">load content</a> <a href"/loadmeto.html" class="next">load other content</a>  <div id="ajaxcontent"></div> <div id="ajaxloader">*obligatory animated gif*</div> 

and following jquery first loads content on initial page load, , subsequently overwrites other content when .next buttons clicked:

// load default initial content  $(document).ready(function() { $('#ajaxcontent').load('/keyplate/1'); });  // dynamically content via ajax $(document).on("click", ".next", function(){     var link = $(this).attr('href');      $('#ajaxcontent').fadeout('fast', function() {         $.get(             link +' #ajaxcontent',              function(data) {                 $("#ajaxcontent").html(data).fadein('fast');             },              "html"         );      });     return false;  }); 

what need on how can show/hide loading div:

a) when page loading default content; , b) subsequently when .next href content being loaded

thanks in advance!

try using ajaxstart() & ajaxstop() methods:

html

<div id="ajaxloader">     <img src="/images/ajax-loader.gif" alt="loading..."/> </div> 

css:

div#ajaxloader {     display: none;     width:100px;     height: 100px;     position: fixed;     top: 50%;     left: 50%;     text-align:center;     margin-left: -50px;     margin-top: -100px;     z-index:2;     overflow: auto; }   

js

$('#ajaxloader').ajaxstart(function () {     $(this).fadein('fast'); }).ajaxstop(function () {     $(this).stop().fadeout('fast'); }); 

this show loading image whenever ajax request starts , hide when ajax request stops.