Загрузка gif-анимации перед загрузкой содержимого iframe с сервера

Question

Мне нужно показать gif-анимацию "Загрузка" в моем приложении перед загрузкой фреймов. Я пробовал в 3 методах.
1. используя Updateprogress в панели обновления. Процесс обновления работает хорошо, но после загрузки в браузер фреймы размываются.
2. используя BlockUI используя jquery
3. используя css. Во всех методах указан срок загрузки анимации в формате gif. Но в моем приложении iframe получает отчет от сервера pentaho и загружает его. Если я вручную укажу время, скажем, 3000 секунд, оно будет отличаться от загрузки содержимого iframes. Я не смог найти точное время для анимации. как получить время загрузки содержимого iframes с сервера и реализовать эту анимацию. Мой исходный код для методов Updateprogress и BlockUI:
http://www.codedigest.com/Articles/ASPNETAJAX/125_Using_UpdateProgress_Control_Effectively.aspx
http://www.malsup.com/jquery/block/#demos
Реализация метода css в виде Source: jQuery Alert Dialogs Plugin и mycode as

 <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

Событие загрузки может быть вызвано с помощью $(document).ready(....); Событие в содержании iframe.

Еще более плавный подход заключается в том, чтобы скрыть содержимое iframe через CSS и показать его после полной загрузки, а затем скрыть .gif образ.