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

Question

>我需要在加载 iframe 之前在我的应用程序中显示一个"正在加载"的 gif 动画。我尝试了 3 种方法.
1. 在更新面板中使用更新进度。更新进度运行良好，但在浏览器中加载后会导致 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;
}

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

Answer 1

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

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

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

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