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

Posted 2023-02-23

【中文标题】使用 JQuery 在 DIV 中显示繁忙指示器

【英文标题】：Show a busy indicator in a DIV with JQuery

【发布时间】：2012-09-28 20:33:24

【问题描述】：

我有一个动画 .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 电话工作正常。我只是不确定如何处理繁忙的指示器部分。

【问题讨论】：

尝试块 ui malsup.com/jquery/block

【参考方案1】：

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

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

和

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

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

【讨论】：

小心。如果您隐藏动画 gif，IE8（如果 IE9 也不知道）无法在隐藏的现在可见的 div 上显示动画。图像将静止不动。

@Alfabravo：你的意思是我也要支持IE？！？！ ...开个玩笑，虽然我从未见过。你能制作一个 JSFiddle（或其他来源）来说明吗？

我的 0.02：我有一个 web 应用程序，我在其中使用了“加载”动画 gif。它位于一个隐藏的 div 中，我根据需要将其隐藏起来。它运行良好，但 IE（我记不清是 7 还是 8）仍然显示 gif 并且客户抱怨，因为它似乎“站点已停止工作”。让我尝试构建一个 jsfiddle...

Alfabravo，它似乎在 ie8 中对我有用 jsfiddle.net/4AQx6/2 也许你在谈论 ie7 ？

我有机会在 ie6 和 ie7 中测试它，它在 O_o 中都有效。也许你的例子是一个孤立的事件？

【参考方案2】：

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