title: Unable to display loading GIF image when content changes without refresh
body: <p>I am working on a project wherein I am loading database data in a section. I have used an indicator which is basically an GIF image which gets displayed when I click on the URL which opens the page where data gets loaded. The indicator is hidden when data loads completely. This seems to be working well in this scenario but it does not work when I click on the other URL which loads the section without refreshing the page.</p>
  
  <p>Code which handles on link click:</p>
  
  <pre><code>$(".link1").click(function(event){
    alert("hi")
    //$('#overlay').fadeIn();
  
    $("#overlay").css("display", "block");
    event.preventDefault();
    var url = $(this).attr("href");
    $('#MainContent').load(url);
  
    var res = url.split("/");
    res = res[2].replace(/([A-Z]+)/g, " $1");
    document.getElementById("pageName").innerHTML = res;  
  });
  </code></pre>
  
  <p>Code which hides the GIF once the data loading is complete: </p>
  
  <pre><code>jQuery(window).load(function(){  
    $("#overlay").css("display", "none");
  });
  </code></pre>