0

シナリオ: 画像のプリロード

  1. ajax クエリを実行する
  2. ロード画面を表示
  3. ajax クエリから結果を取得する
  4. dom に画像を挿入する
  5. 画像の読み込みが完了するまで待ちます
  6. ロード画面を隠す

私は次のことを考えていました：

function ajaxCallback(results) {
   /* snip insert into dom code */

   $(".waitForLoad").each(function() {
      imageLoadingCount++;
      $(this).load(imageLoaded);
   });
}

var imageLoadingCount = 0;
function imageLoaded() {
   imageLoadingCount--;
   if (imageLoadingCount == 0)
      HideLoadingScreen();
}

ブラウザ DOM と JavaScript の相互作用についてはよくわかりません。DOM は、画像の読み込みを開始する前に JavaScript の実行が完了するのを待ちますか? 競合状態の可能性が心配です。

4

3 に答える 3

0

AJAXリクエストですべての接続を使用している場合を除き、Javascriptは読み込みと並行して実行する必要があります。javascriptの実行中もブラウザは正常に機能します。これが、そもそもブラウザの背後にある全体的なポイントです。

于 2009-06-25T15:10:46.587 に答える
0

$ .ready（）内でajaxCallbackを安全に実行し、ほとんどの問題を取り除くことができます。また、新しく作成されたタグのDOMは更新されないことに注意してください。

また、次の点にも注意してください。-HTTP/ 1.1仕様では、ブラウザはホスト名ごとに2つ以下のコンポーネントを並行してダウンロードすることを推奨しています。複数のホスト名からイメージを提供する場合、3つ以上のダウンロードを並行して実行できます。

多くのシナリオでは、ロード画面を1〜2秒以上表示していると、ユーザーはイライラします。画像が読み込まれるのを待つのは、ほとんど良い考えではありません。

于 2009-06-25T15:49:33.003 に答える
0

load イベント オブザーバーは、要素が完全に読み込まれる前に設定した場合にのみ機能し、その後に設定しても何も起こらないため、少し怖いです。したがって、ajaxCallback() をいつ呼び出すかによって大きく異なります。onComplete ではなく onSuccess を使用することをお勧めします。

また、$(".waitForLoad") 自体で load イベント オブザーバーを使用することは可能でしょうか?

于 2009-06-25T15:18:41.797 に答える