0

次のことを行うこのjqueryイメージサイクラーがあります。

  • 複数の画像をプリロードします (50 とか?)
  • これらの 40 個からランダムに選択し、そのうちの 14 個を毎回 14 個の div に割り当てます。
  • それらを永遠に循環させる

14 の div のそれぞれに割り当てられたランダムな画像を取得して、14 の画像を循環させる最良の方法は何でしょうか?

編集:私の最初のソリューションのような AJAX 呼び出しは愚かな考えのようです (何百ものページが開いている場合、サーバーに高い負荷がかかります)。

EDIT2：より正確かつ明確になるように質問を書き直しました

事前キャッシュに関する次の優れた方法を見つけました。

  var images = [
    '/path/to/image1.png',
    '/path/to/image2.png'
];

$(images).each(function() {
    var image = $('<img />').attr('src', this);
});

私の古い現在の方法：

  $("#hi1").load('/get_img');
  $("#hi2").load('/get_img');
  $("#hi3").load('/get_img');
  ... etc till 14

  var refreshId = setInterval(function() {
      $("#h1").load('/get_img');
      $("#h2").load('/get_img');
      $("#h3").load('/get_img');
      }, 4000);
      $.ajaxSetup({ cache: true });
  })
4

2 に答える 2

1

AJAX でソースを返し、<img>src を作成して設定し、不要な場合は非表示にすることができます。その画像が再び返された場合は、再度ロードする代わりに非表示に戻すことができます。次のような方法で画像が存在するかどうかを確認できます。

$('img[src="' + src + '"]').length > 0;

それが本当なら、それは存在するので、それを示してください。そうでない場合は、画像を DOM に読み込みます。必要のないときは画像を非表示にします。

于 2012-10-11T06:35:37.743 に答える
1

コードでできることは 1 つです。

  $("#hi1").load('/get_img');
  $("#hi2").load('/get_img');
  $("#hi3").load('/get_img');

  var refreshId = setInterval(function() {
      $("#h1").load('/get_img').hide().delay(4000).show();
      $("#h2").load('/get_img').hide().delay(4000).show();
      $("#h3").load('/get_img').hide().delay(4000).show();
      }, 0);
      $.ajaxSetup({ cache: true });
  })

そのため、DOM の準備が整うと、画像が読み込まれ、すぐに非表示になります。その後delay(4000)、4 秒後にコンテンツが表示されます。

于 2012-10-11T06:36:01.843 に答える