用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中顯示繁忙的指標

回答

相關問題