使用 JQuery 在 DIV 中显示繁忙指示器

Question

我有一个动画 .gif，我想将其用作忙碌指示器。加载某些内容时将使用此繁忙指示器。

加载后，内容将显示在 div 中。在加载内容时，我希望在现有内容上基本上有一个半透明层，该层还显示我的动画 .GIF。目前，我有以下内容：

<div id="main">
  <div id="contentArea">
    Loaded content will go here
  </div>
  <input type="button" value="Load Latest Content" onclick="loadContent();" />
</div>

脚本是：

<script type="text/javascript">
  function loadContent() {
    // Show busy indicator on semi-transparent layer.
    pingWebService();
    return false;
  }
  function pingWebService() {
     $.ajax(...);
  }
  function pingWebServiceComplete() {
    // Hide busy indicator
  }
</script>

我的.ajax 电话工作正常。我只是不确定如何处理繁忙的指示器部分。

Answer 1

JQuery 只需要显示/隐藏指示器图像，可以这样做：

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

和

$("#MyBusyElement").hide();

剩下的就是你的 html/css 布局了。您可以在 CSS 中使用透明度，但旧版浏览器无法正确支持此功能，因此要么使用具有透明背景的“忙碌”gif 来覆盖 div，要么在旧版浏览器中选择完全不透明的封面（我只想去吧。使用旧浏览器的人应该受苦！）

Answer 2

很简单，就像musefan说的，只是隐藏或显示包含图像的div。这是一个人为的example。