人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

ご教授ください

●質問者: qlzyu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● nakedfeels

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));
 });
});

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ