-1

リモートサーバーから画像をロードしています。すべての画像が正しい順序で読み込まれるようにする方法

また、すべての画像が読み込まれたときにのみアラートが呼び出されるようにするにはどうすればよいですか

以下のコードは画像を正しい順序でロードせず、画像がロードされる前にアラートを呼び出します。

$(window).load(function () {
  $('.fancybox').each(function () {
    var hh = $(this).attr('href');
    var img = new Image();
    img.src = hh;

    function TIMG(i) {
      if (img.complete != null && img.complete == true) {
        $('.mag').append('<img src="' + hh + '" class="cls" />');
      } else {
        setTimeout(TIMG, 1000);
      }
    }

    setTimeout(TIMG, 1000);    
  });

  alert(hi);
});
4

2 に答える 2

1

準備ができたらすぐに順番に追加したいという新しい情報に基づいて、次のように行うことができます

 $(document).ready(function () {
      // preload all the images as fast as possible
      var imgs = [];
      $('.fancybox').each(function () {
          // get all images preloading immediately
          // so there is the best chance they are available when needed
          var img = new Image();
          imgs.push(img);
          img.onload = function() {
              addReadyImages();
          }
          img.className = "cls";
          img.src = $(this).attr('href');
      });

      function addReadyImages() {
          // show all images that are ready up to here
          while (imgs.length && imgs[0].complete === true) {
              // append the loaded image from the start of the array
              $('.mag').first().append(imgs[0]);
              // remove the one we just did from the start of the array
              imgs.shift();
          }
      }
 });

実際のデモ: http://jsfiddle.net/jfriend00/sCHws/

このアルゴリズムは次のように機能します。

  1. できるだけ早くすべての画像のプリロードを開始します。
  2. ページ内でアイテムが出現する順序で画像オブジェクトを配列に格納し.fancyboxます
  3. 画像ごとに onload ハンドラーを設定して、準備ができたらすぐにわかるようにします
  4. 任意のイメージの onload ハンドラーで、準備ができているすべてのイメージを配列の先頭に追加してから、それらを配列から削除します。

PS アイテムは 1 つしかないと仮定.magしたため、画像オブジェクトの個別のコピーを作成する必要はありません (新しい画像オブジェクトを作成するよりもはるかに効率的です)。そうでない場合は、問題全体を確認できるように、HTML を開示してください。

于 2012-09-30T21:28:08.050 に答える
0

ブラウザは通常、画像をダウンロードするときにブロックしないため、画像が正しい順序で読み込まれることを確認する唯一の方法は、キューを使用して順番に読み込み、前の画像が完了した後に次の画像を開始することです。ただし、パフォーマンスに深刻な影響を与える可能性があるため、これは絶対にお勧めできません。

すべての画像が読み込まれるのを待つには.promise()、jQuery の および関連するメソッド ( http://api.jquery.com/promise/load() ) を使用して、画像がいつ編集されるかを監視するのが最適です。特に画像の表示を制御したい場合 (これはおそらくあなたが関心を持っていることです)、それらはロードされた後に順番に表示される可能性があります。

于 2012-09-30T21:06:21.110 に答える