Question

我需要在加载iframe之前在我的应用程序中显示“正在加载”的gif动画。我试过3种方法。
1。在更新面板中使用Updateprogress。更新进度很有效，但在浏览器中加载后会导致iframe模糊。
2。使用BlockUI使用jquery
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方法实现为来源：jQuery Alert Dialogs插件和mycode为

 <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;
}

任何建议都会有所帮助。谢谢

Answer 1

服务器不知道客户端加载特定资源需要多长时间。这个时间基本上是资源通过Internet从服务器到客户端的时间。

更好的方法是在调用资源时显示图像，即jAlertload()并查找内容的加载事件。加载内容后，您可以隐藏.gif

可以使用iframe内容中的$(document).ready(....);事件触发加载事件。

更平滑的方法是通过CSS隐藏iframe的内容并在完全加载后显示它，同时隐藏.gif图像。

在从服务器加载iframe的内容之前加载gif动画

1 个答案: