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

Answer 1

要在 load() 完成时隐藏图像，您应该提供一个回调函数，如下所示:

$("#overlay").show();

// ...

$('#MainContent').load(url, function() {
  $("#overlay").hide();
});

另请注意 show() 和 hide() 优于 css()。