jquery - 使用 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

很简单，就像musefan说的，隐藏或显示包含图片的div就可以了。这是人为的 example .