jQuery.load（）コールバックと画像の操作

Question

jQuery.load（）メソッドを使用してコンテンツを動的に取得する場合、要求が完了し、HTMLが現在のページに引き込まれるとコールバック関数が起動します。

新しいHTMLに含まれる画像が完全に読み込まれたときにうまくいく方法はありますか？

ありがとうございます！

Answer 1

私が知る限り、これは簡単ではありません。いくつかは​​イベントハンドラを使用することをお勧めかもしれませんが、jQueryのドキュメントが使用するための注意点の数を持っている（documentation）：

画像

で使用するloadイベントの

警告

開発者が解決しようとすると、共通の挑戦.load（） ショートカットを使用すると、イメージ（または イメージのコレクション）が完全に読み込まれたときに関数を実行することができます。いくつかの注意点がありますが、これは注意する必要がある です。これらは次のとおりである：

• それはそれはない
• 前の画像SRCが同じSRCに設定されている場合は、WebKitの中で正しく発生しません一貫しても確実にクロスブラウザ
• を動作しません。正しくバブルアップDOMツリー
• が頭に浮かぶ唯一の方法は引っ張ってjQueryのを使用することですすでにブラウザのキャッシュに

を生きるイメージの火災に中止することができますimgの要素を返されたHTMLから取り出し、javacript Imageオブジェクトを使用して画像を読み込みます。 .onloadイベントハンドラをImageオブジェクトに添付します。それで、すべてがいつロードされたのかを、遅延オブジェクトや単純なカウンタなどを使って追跡する必要があります。ここで

はimgオブジェクトを引き出し、すべてのイメージがロードされた場合に発生させる$.when()で$.Deferred()オブジェクトを使用してデモです：デモで

http://jsfiddle.net/jtbowden/h4AMG/

イメージは持っていた後、コンテンツにのみロードされますロードされる。これを行うには、$.load()を$.ajax()に変更する必要があります。

はここで負荷を追跡するための基本的なカウンタを使用するバージョンである：情報のため

http://jsfiddle.net/jtbowden/gnW3f/