0

在加载 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 警报对话框插件和 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;
}

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

4

1 回答 1

0

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

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

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

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

于 2012-06-20T06:09:08.940 回答