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

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

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

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

ご教授ください

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/11/23 17:25:04

回答1件)

id:nakedfeels No.1

回答回数9ベストアンサー獲得回数3

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));
  });
});
id:qlzyu

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

2012/11/18 20:22:40

コメントはまだありません

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません