qlzyu回答ポイントなし

jQuery append で追加するdom 要素内すべての画像背景画像の読み込み完了をハンドリングする方法をおしえてください。

jQuery で ajaxで読み込んだ外部HTMLを表示させるよう、
読み込み完了と同時に要素Aにappendしているのですが、
その際、画像がパラパラと読み込まれかっこわるいので、
全面にローディングのボックスを表示させ、
画像がすべて読み込み完了したら
ローディングを非表示するよう、処理を考えています。

appendする親要素に on("load",function(){}); を設定してみたりしているのですが、
方法が正しくないのか、ファンクションが呼び出されません。

それとも、そもそも無理なのでしょうか、、、？
DOM内のimg要素を捜査して、new Image()で読み込み処理をする必要があるのでしょうか

ご教授ください

ログインして回答する

みんなの回答

nakedfeels2012/11/17 16:04:31

jQuery のドキュメントによると、画像の読み込みでは load イベントがクロスブラウザで同じ挙動を保証できないようなので、すべてのブラウザで実現するのは無理かもしれません。
が、jQuery.Deferred を使ってご要望の処理は以下のように書けます。Firefox 14、Chrome では動作しています。

// requirements: jquery >= version1.6
$(document).ready(function() {
  // urls of the images you want to load
  var images = [
    "/1.jpg",
    "/2.jpg",
    "/3.jpg",
    "/4.jpg",
    "/5.jpg"
  ];
  // make jQuery.promise objects
  var promises = $.map(images, function(src, i) {
    var $img = $('<img />');
    var defer = $.Deferred();
    $img.bind({
      load: function(event) {
        defer.resolve($img);
      },
      error: function(event) {
        defer.reject("load failed: " + src);
      }
    });
    $img.attr('src', src);
    return defer.promise($img);
  });
  $.when.apply(null, promises)
  // callback function called when you have finished loading all images successfully
  .done(function() {
    $('body').append(Array.prototype.slice.call(arguments));
  })
  // callback function called when you have failed to load an image
  .fail(function(message) {
    $('body').prepend($('<div></div>').text(message));
  });
});

スター

1件のコメントを見る
qlzyu 2012/11/18 20:22:40

なるほど。やはり上位DOMにイベント登録するだけで、
ハンドリングする（できる）、のは難しいのですね、、。
コードありがとうございます。
ajaxで受け取ったHTMLからimgタグ取り出してsrcでimagesをつくって
この処理を挟んでやってみます。
非常に勉強になります。

スター

jQuery append で追加するdom 要素内すべての画像背景画像の読み込み完了をハンドリングする方法をおしえてください。

みんなの回答

nakedfeels2012/11/17 16:04:31

qlzyu 2012/11/18 20:22:40

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版