iframe의 내용이 서버에서로드되기 전에 gif 애니메이션로드 중

Question

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 :

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

으로 jQuery를 경고 대화 상자 플러그인 및 mycode

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 될 것

Answer 1

서버는 클라이언트가 특정 자원을로드하는 데 걸리는 시간을 모릅니다. 이 시간은 기본적으로 인터넷을 통해 서버에서 클라이언트로 리소스가 도달하는 데 걸리는 시간입니다.

더 나은 방법은 리소스를 호출 할 때 이미지를 표시하는 것입니다 (예 : jAlertload()). 콘텐츠의로드 이벤트를 찾으십시오. 콘텐츠가로드되면 콘텐츠를 숨길 수 있습니다. .gif

iframe 콘텐츠에 $(document).ready(....); 이벤트를 사용하여로드 이벤트를 트리거 할 수 있습니다.

더 부드럽게 접근하려면 CSS를 통해 iframe의 내용을 숨기고 완전히로드 된 후에 표시하고 .gif 이미지를 숨기십시오.