2

完了までに 20 ～ 30 秒かかるレポートを生成するこの php スクリプトを取得しました。プログレス バーを追加したいのですが、進行状況が DB で正しく更新されています。

$.post問題は、メインページがレポートをロードしている間、または$.getそこに座っている間にjQueryを使用できないことです。

「お待ちください」というウィンドウをポップアップして小さな回転アイコンを表示するなど、javascriptを実行できますが、メインページの読み込み中にFirefoxがajax post/getの送信を拒否します。

これを回避する方法はありますか？すべてをiframeに入れようとしましたが、うまくいきませんでした。(firebug と http live ヘッダーを使用してトラフィックを監視しています。)

4

3 に答える 3

3

ページが読み込まれたら、レポートに jQuery を読み込むことができます。次に例を示します。

$(document).ready(function() {
    $('#someDiv').html('<strong>Loading...</strong>')
                 .load('report.html');
});

プログレス バーについては、jQuery UI Progressbarを確認してください。そうは言っても、マニュアルはこのサウンドポイントを作ります：

実際の完了率を計算できない場合は、不確定な進行状況バー (近日公開予定) またはスピナー アニメーションを使用して、ユーザー フィードバックを提供することをお勧めします。

その場合は、適切なメッセージを含むアニメーション化されたスピナー画像などをお勧めします。次に例を示します。

$(document).ready(function() {
    $('#someDiv').html('<img src="images/spinner.gif"/><strong>This could take a while...</strong>')
                 .load('report.html');
});
于 2009-09-30T17:26:55.603 に答える
1

AJAX ページ読み込みアニメーション効果を追加するには: ステップ 1: jQuery ライブラリを追加する

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

ステップ 2: CSS を追加して見栄えを良くします (オプション) ステップ 3: 次の jQuery を追加します

<script>

(function($){

$("html").removeClass("v2");

$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){

    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){ $(this).remove(); });
});

});
})(jQuery);
</script>

ステップ 4: 最後に、必要な場所に html コードを追加します。

于 2012-08-30T04:40:50.573 に答える
1

elementReadyを検討することをお勧めします。時間のかかるレポートの処理が開始される前に、jquery スクリプトが読み込まれ、ページの一部が書き出されていることを確認する場合は、elementReady を使用して何らかの通知を開始できます。ドキュメント全体の準備が整うまで待つ必要はありません。

これがUIプログレスバーで機能するかどうかはわかりませんが、thickboxで使用してグレーアウトし、ページが完全に読み込まれるまで画面への入力をブロックし、thickbox throbber .gifがアクティビティとして十分に機能しますインジケータ。

于 2009-09-30T17:49:58.547 に答える