用JQuery在DIV中显示繁忙的指标

我有一个动画的.gif，我想用作繁忙指标。该忙碌指示符将在加载某些内容时使用。用JQuery在DIV中显示繁忙的指标

加载后，内容将出现在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工作就好了。我不知道如何做繁忙的指标部分。

来源

2012-10-08 user70192

尝试阻止用户界面http://www.malsup.com/jquery/block/ – abhijit

真棒插件。谢谢！ – user70192

谢谢，很高兴它帮助。 – abhijit

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

来源

2012-10-08 15:22:19

为了好玩，我[用你的小提琴弄乱]（http://jsfiddle.net/4AQx6/4/）;） – musefan

JQuery的只需要显示/隐藏哪些可以做类似的指示器图像：

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

和

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

剩下的就是到你的HTML/CSS布局。您可以在CSS中使用透明度，但旧版浏览器不能正确支持这种透明度，所以要么有一个“忙碌”的gif，它具有透明背景以覆盖div，要么在老浏览器中解决完全不透明的封面问题这与老浏览器的人应该忍受！）

来源

2012-10-08 15:01:42 musefan

小心。如果你隐藏动画GIF，IE8（不知道是否IE9）不能在隐藏的即时可见div上显示动画。图像将保持静止。 – Alfabravo

@Alfabravo：你的意思是我还必须支持IE吗？！？！ ...开个玩笑，我从来没有见过这个。你能制作一个JSFiddle（或其他来源）来说明吗？ – musefan

我的0.02：我有一个web应用程序，我用一个“加载”动画gif。它隐藏在一个隐藏的div中，我根据需要隐藏了它。它运行良好，但IE浏览器（我无法清楚地记得它是7还是8）显示gif仍然存在，客户抱怨，因为它看起来像“该网站已停止工作”。让我试试建立一个jsfiddle ... – Alfabravo

用JQuery在DIV中显示繁忙的指标

回答

相关问题