在從服務器加載iframe的內容之前加載gif動畫

我需要在加載iframe之前在我的應用程序中顯示「加載」gif動畫。我嘗試了3種方法。
1.在更新面板中使用Updateprogress。更新進度效果良好，但會導致iframe在瀏覽器中加載後模糊。
2.使用jQuery的BlockUI
3.使用css。在所有的方法中，指定了加載gif動畫的時間限制。但在我的應用程序中，iframe從pentaho服務器和負載獲取報告。如果我手動指定一個3000秒的時間，它不同於iframe的內容加載。我無法找到動畫的確切時間限制。如何從服務器獲取iframe的內容加載時間並實現該動畫。我給的UpdateProgress和BlockUI方法的代碼源：
http://www.codedigest.com/Articles/ASPNETAJAX/125_Using_UpdateProgress_Control_Effectively.aspx
http://www.malsup.com/jquery/block/#demos
CSS方法implementaion作爲來源：jQuery的警報對話框插件和mycode的作爲在從服務器加載iframe的內容之前加載gif動畫

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#alert").click(function() { 
    jAlertload(); 
    setTimeout(hideit,seconds); 
    }); 
    }); 
    function hideit() { 
      $("#popup_containerload").remove(); 
      $("#popup_overlayload").remove(); 
     } 
     beforeload = (new Date()).getTime(); 
     function pageloadingtime() { 
     afterload = (new Date()).getTime(); 
     var seconds = 0; 
     seconds = (afterload - beforeload)/1000; 
     seconds1 = seconds * 1000;  
     } 
     window.onload=pageloadingtime; 
    </script>

CSS

#popup_containerload { 
    font-family: Arial, sans-serif; 
    font-size: 12px;min-width: 10px; 
    max-width: 600px; 
    background: none repeat scroll 0 0 transparent; 
    position:absolute;color: #000; top: 547px; 
    z-index: 99999; 
}  
#popup_contentload { 
    padding: 1em 1.75em;margin: 0em; 
}  
#popup_contentload.alert 
{ 
    position:absolute;height:100px;width: 100px;top: 55px; 
    background: url(ajax-loader-5.gif) 10px 16px no-repeat; 
}

任何建議將helpful.Thanks

來源

2012-06-20 kk1076

服務器不知道客戶端加載特定資源需要多長時間。這一次基本上是資源通過Internet從服務器到客戶端所需的時間。

對您而言，更好的方法是在調用資源（即jAlertload()）時顯示圖像並查找內容的加載事件。加載內容後，您可以隱藏您的內容。使用$(document).ready(....);事件可以觸發加載事件。

更平滑的方法是通過CSS隱藏iframe的內容，並在完全加載後顯示它，同時隱藏.gif圖像。

來源

2012-06-20 06:09:08

在從服務器加載iframe的內容之前加載gif動畫

回答

相關問題