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()。

内容更改时无法刷新时无法显示加载GIF图像

1 个答案: