6

ボタンをクリックして ajax 経由でコンテンツを読み込むときに、進行状況バーを表示したいと考えています。呼び出しを作成するとすぐに$.ajax、サーバー上の別のファイルからデータを取得するサーバー上の php ファイルに通信が送られます。そして、データを取り込むのに 7 ～ 8 秒かかります。

ajaxリクエスト時にプログレスローダーを表示したい。私はインターネットを見ていましたが、簡単な解決策を見つけることができませんでした。私が見つけたのは、この単純な操作を実行するためにカスタマイズするのに非常に時間がかかる複雑なアップロード ファイル スクリプトだけでした。誰かが助けてくれれば、それは素晴らしいことです。そうでなければ、スピナーで間に合わせる必要があります。

4

5 に答える 5

3

他のすべての回答は、プレースホルダーの画像またはテキストを表示するか、それを偽造するだけであるため、次のように行うことができます (説明のみで、コードはありません - しかし、唯一の難しい部分は、実際にどれだけの作業が行われたかを判断することです)。

経由して呼び出した php スクリプトを編集して、$.ajax完了した作業のパーセンテージを計算します。これを行う方法は、スクリプトの好みに大きく依存するため、非常に簡単です (たとえば、それぞれがほぼ同じ時間かかる処理対象の配列) または非常に困難 (たとえば、ほとんどの時間がライブラリまたは組み込み関数への 1 回の繰り返しのない呼び出しに費やされる場合)。このパーセンテージをセッション変数に保存します。

$_SESSION["PERCENTAGE_DONE"] = $my_calculated_percentage;

明らかに、この変数をできるだけ頻繁に更新したいと考えています。

ここで、この値を出力するだけの別の php スクリプトを作成します (この例ではプレーンテキストで十分ですが、json や xml、またはその他の好きな形式を使用することもできます)。

//initialize session, set headers etc. before this
echo $_SESSION["PERCENTAGE_DONE"]

JavaScript部分については、ajaxを介して新しいphpスクリプトを呼び出し、戻り値を読み取り、進行状況バーを描画/更新する別の関数を作成します（描画部分については、JustinJohnsの回答を出発点として使用できます）。$.ajaxここで、メインコールを実行した後、この関数を使用setTimeoutして、タスクが完了するまで繰り返しサーバーにクエリを実行します。

于 2012-09-28T12:26:03.840 に答える
0

Ajax プログレス バーの次のスクリプトを試してください。

<script>
function submit_form_data(){
    $("#preview").html(''); 
    $("#preview").html('<img src="loader.gif" alt="Uploading...."/> <br><p>Please wait for response.............</p>'); 
    $.post('getdata.php',function(data){$("#preview").html(data)}) }
</script>

<div id='preview'></div>
于 2012-11-15T07:17:46.420 に答える
-2

根本的な問題は、リクエストにかかる時間が分からないことです。

これは答えではなく提案になります。

時間は常に約7〜8秒になると思いました。

毎秒 10 パーセンテージをロードして、90 パーセンテージに到達するまで進めます。

ajaxリクエストが完了するのを待ってから、ajaxの成功コールバックでバー幅を100パーセントにします。

バーのパーセンテージをロードする時間でカスタマイズできます。

このデモを確認してください

于 2012-09-28T11:07:28.113 に答える
-5

使用した画像は、アニメーション画像をロードする必要があります。 

<div id="loading" >
<p>
<img src="images/loading.gif">
Please Wait
</p>
</div>

次に、スクリプト関数で次のコードを使用します

<script type='text/javascript'>
function showLoading() {
$("#loading").show();
}

function hideLoading() {
$("#loading").hide();
}

</script>

次に、ajax 呼び出しの必要な場所で、showLoading および hideLoading 関数を呼び出します。アニメーションの表示と非表示を切り替えます。

于 2012-09-28T10:25:58.147 に答える
-7

簡単な解決策を求めたので、これが役立つかもしれません..IDが「ロード中」のdivを表示を非表示にします。

<div id='loading' style='display:none;'><img src='loading.gif' /></div>

ajax リクエストが呼び出されたら、div を表示します

$('#loading').show();

応答が成功したら、再び div を非表示にし、

$('#loading').hide();
于 2012-09-28T10:16:16.863 に答える