1

jQuerys .load() メソッドを使用して動的にコンテンツを取り込む場合、リクエストが完了するとコールバック関数が起動し、HTML が現在のページに取り込まれます。

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

ありがとう！

4

1 に答える 1

4

私の知る限り、これは簡単ではありません。イベント ハンドラーの使用を提案する人もいるかもしれません.load()が、Jquery のドキュメントには、それを使用するためのいくつかの注意事項があります ( documentation )。

画像で使用する場合の load イベントの注意事項

開発者が .load() ショートカットを使用して解決しようとする一般的な課題は、画像 (または画像のコレクション) が完全に読み込まれたときに関数を実行することです。これには注意すべき既知の警告がいくつかあります。これらは：

  • クロスブラウザーで一貫して確実に動作しない
  • 画像の src が以前と同じ src に設定されている場合、WebKit で正しく起動しません。
  • DOM ツリーを正しくバブルアップしない
  • ブラウザのキャッシュに既に存在する画像の起動を停止することができます

頭に浮かぶ唯一の方法は、jQuery を使用しimgて返された HTML から要素を引き出し、javascriptImageオブジェクトを使用して画像をロードすることです。イベント ハンドラーをオブジェクトにアタッチできます。次に、遅延オブジェクトや単純なカウンターのようなものを使用して、それらがすべて読み込まれたときを追跡する必要があります。.onloadImage

これは、オブジェクトを引き出し、すべての画像がロードされたときにトリガーするオブジェクトimgを使用するデモです。$.Deferred()$.when()

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

デモでは、画像が読み込まれた後にのみコンテンツが読み込まれます。$.load()これを行うには、に変更する必要があります$.ajax()。

以下は、基本的なカウンターを使用して負荷を追跡するバージョンです。

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

于 2012-04-30T23:25:55.550 に答える