0

複数の一意のIDをループし、ajaxを使用して、データベーステーブルの行に対応するdivに情報をロードするページがあります。作成する必要がある div はかなり多く、各 div にはかなりの量の情報が含まれているため、これにはかなりの時間がかかります。私がやりたいのは、各 div が dom に追加されたらアニメーション化/表示し、ループが作成されたときに追加の div を追加/表示し続けることです。

私のコードは次のようになります。

// loop section unique IDs
$.each(uniqueIDs, function(key, uniqueID)
{

    // call AJAX synchronously
    // append resulting information to page

    // show newly appended div
    $("#" + uniqueID).slideDown();

});

私が抱えている問題は、アニメーションが非常に一貫していないことです。場合によっては、最初の div がアニメーション化され、後続のすべての div がアニメーションなしで表示されることがあります。すべての div がアニメーションなしで表示されることがあります。これを行うには、もっと厳密な方法が必要だと確信しています...

EDIT私はdivを適切な順序に保つためにajaxを同期的に呼び出してきました（そうでなければ、divは完了した順序でdomに追加されます）。元の順序を保持する非同期 ajax 呼び出しを使用した解決策を見つけていただければ幸いです。

4

3 に答える 3

1

$.Deffered非同期呼び出しごとにオブジェクトの配列を使用し、それをに渡します$.when()。この.done()コールバックは、すべての遅延オブジェクトが解決されたとき、つまりすべての非同期操作が終了したときにのみ起動します。

var uniqueIDs = [1, 2, 3, 4];
var $deferreds = [];            

$.each(uniqueIDs, function (i, elem) {
    $deferreds.push(
      $.ajax({
        // options
      }).done(function (data) {
      })
    );
});

$.when.apply($, $deferreds).done(function () {
   console.log(arguments); // arguments will contain the result of each asynchronous call in order
});

したがって、そのコールバックを使用して、を順番にアニメーション化できますdiv。

これがデモです。

于 2012-09-13T00:05:59.470 に答える
0

AJAXを同期的に実行すると、そのような影響が発生する傾向があり、ブラウザがハングしてリクエストの終了を待機し、その間にアニメーションを実行できなくなります。あなたがすべきことは次のようなものです：

// loop section unique IDs
var queue = uniqueIDs.splice(0); // copy array
function runQueue()
{
    if(queue.length == 0) return;
    var uniqueID = queue.shift();
    myAjaxLoadFunction(uniqueId, function() {

        // show newly appended div
        $("#" + uniqueID).slideDown();
        runQueue();

    });

});
runQueue();

多くの場合、myAjaxLoadFunctionをjQuery関数呼び出しに置き換えるか、コールバックを受け取るロード用の独自の関数を使用できます。

于 2012-09-13T00:06:54.083 に答える
0

糸車の読み込みイメージを使用して、HTML に親 div を作成するのはどうですか。だからこのようなもの：

前に DIV のサイズを決定してスタイルを設定することをお勧めしますが、全体として、ここで私が話していることは次のとおりです。

<html>
...
<body>
...
<div id="div1"><img src="loading.gif"/></div>
<div id="div1"><img src="loading.gif"/></div>
<div id="div1"><img src="loading.gif"/></div>
...

JavaScript:

result = $.ajax(...)
$("your divs").each(function(index, value) {
  $(this).empty().append(result[index]);
});

$(this) は div で、result[index] は ajax リクエストから取得する行です。
基本的に .empty() 関数は、読み込み中の png が削除され、必要なデータに置き換えられることを保証します。

幸運を。

于 2012-09-13T00:12:46.563 に答える