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。

Answer 2

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

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

和

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

剩下的就是你的html / css布局了。您可以在CSS中使用透明度，但旧浏览器不能正确支持这一点，因此要么具有“忙”gif，其具有覆盖div的透明背景，要么在旧版浏览器中使用完全不透明的封面（I只会这样。拥有旧浏览器的人应该受苦！）

使用JQuery在DIV中显示忙碌指示符

2 个答案: