当内容更改而不刷新时，javascript无法显示正在加载的GIF图像

Question

我正在一个项目中工作，我正在一个部分中加载数据库数据。我使用了一个基本上是GIF图像的指示器，当我点击打开数据加载页面的URL时，它会显示出来。当数据完全加载时，该指示器将隐藏。在这种情况下，这似乎工作得很好，但当我点击另一个URL加载该部分而不刷新页面时，它就不起作用了

点击链接时处理的代码：

$(".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;  
});

数据加载完成后隐藏GIF的代码：

jQuery(window).load(function(){  
  $("#overlay").css("display", "none");
});