在从服务器加载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动画

回答

相关问题