1

jQuery で .load() を使用して html コンテンツをロードしていますが、このコンテンツには 3/4 の画像が埋め込まれています。成功イベントは、実際には画像ではなく、すべての html が読み込まれたときに .load() でのみ発生します。ページのコンテンツ全体をプリロードする方法を知っている人はいますか?

$('#ajax_loader').hide().load('page.html',function(){
  $(this).fadeUp(1000);
});

これは私の単純なコードです (残りの部分は完全なアプリにあります)。次のコード (つまり、page.html) をロードします。

<div>
  <div id="slideshow">
    <img src="images/img1.jpg" />
    <img src="images/img2.jpg" />
    <img src="images/img3.jpg" />
  </div>
  <p>This is some sample content</p>
</div>
4

3 に答える 3

3

fadeInパフォーマンスが低下するため、画像が読み込まれた後はアニメーションを使用しないことをお勧めします。通常はfadeIn、コンテンツを作成してから画像の読み込みを開始し、アニメーションができるだけ多くのユーザーにとってスムーズになるようにすることをお勧めします。

そうは言っても、もちろん、元の目標に固執したい場合は、元の目標を達成できます
。1x1 の空白の画像を画像src属性として使用し、実際の URL をtitle.

<div>
  <div id="slideshow">
    <img src="blank.gif" title="images/img1.jpg" />
    <img src="blank.gif" title="images/img2.jpg" />
    <img src="blank.gif" title="images/img3.jpg" />
  </div>
  <p>This is some sample content</p>
</div>

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

$('#ajax_loader').hide().load('page.html', function(){
  var c = 0;
  var images = $("#slideshow img");
  images.load(function(){
    if (++c == images.length) {
      $('#ajax_loader').fadeIn(1000);
    }
  });
  images.each(function(){
    this.src = this.title;
  });
});
于 2011-06-12T17:13:30.443 に答える
2

画像は個別のHTMLリクエストで読み込まれ、応答のHTMLが解析されるまで、ブラウザは画像の読み込みを開始することさえできません。

コンテンツをロードする前に画像のURLがわかっている場合は、「Image」要素を作成してロードされるのを待つ（つまり、「load」イベントを個別に処理する）ことで、画像をプリロードできます。

var imgUrls = [ "images/img1.jpg", "images/img2.jpg", "images/img3.jpg" ];
var c = 0;

for (var i = 0; i < imgUrls.length; ++i) {
  var img = new Image();
  img.onload = function() {
      c += 1;
      if (c == imgUrls.length) {
        // at this point all images are loaded
        // ...
      }
  };
  img.src = imgUrls[i];
}

編集— @galambalazsは、ハンドラーの周りのクロージャーは（この場合）不要であると指摘しました。

于 2011-06-12T16:27:09.457 に答える
-1

この似たような状況をチェックしてください

あなたの問題の主な修正は、.readyand.load演算子の正しい使用であるようです。適切に使用すれば、すべての要素とメディア アイテムがブラウザーに読み込まれるまで待ってから、応答がハンドラーに渡されます。私はあまり盗作したくありません:)そしてそれは本当に素晴らしい答えです。

于 2011-06-12T16:37:46.187 に答える