0

iframes をロードする前に、アプリケーションで「ロード中」の gif アニメーションを表示する必要があります。3つの方法で試しました。
1. 更新パネルで Updateprogress を使用します。更新の進行状況は正常に機能しますが、ブラウザーでの読み込み後に iframe がぼやけます。
2. jquery を使用した BlockUI の使用
3. css の使用。すべてのメソッドで、gif アニメーションの読み込みに制限時間が指定されています。しかし、私のアプリケーションでは、iframe は pentaho サーバーと負荷からレポートを取得します。3000 秒などの時間を手動で指定すると、iframe のコンテンツの読み込みとは異なります。アニメーションの正確な時間制限を見つけることができませんでした。サーバーから iframe のコンテンツ読み込み時間を取得し、このアニメーションを実装する方法。Updateprogress および BlockUI メソッドのコード ソース:
ソース: jQuery Alert Dialogs
Plugin および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;
}

どんな提案も役に立ちます.Thanks

4

1 に答える 1

0

サーバーは、クライアントが特定のリソースをロードするのにかかる時間を知りません。この時間は基本的に、インターネットを介してサーバーからクライアントにリソースが到達するのにかかる時間です。

より良いアプローチは、リソースを呼び出すときに画像を表示しjAlertload()、コンテンツのロード イベントを探すことです。コンテンツがロードされたら、非表示にすることができます.gif

読み込みイベントは$(document).ready(....);、iframe コンテンツのイベントを使用してトリガーできます。

さらにスムーズなアプローチは、CSS を使用して iframe のコンテンツを非表示にし、完全に読み込まれた後に表示し、その間に.gif画像を非表示にすることです。

于 2012-06-20T06:09:08.940 に答える