私は次のことを達成しようとしています: load() メソッドを使用して新しい HTML コンテンツを取得する div があります。
$('#mydiv').load('/newcontent.html');
この新しい HTML には画像も含まれており、これらの画像が読み込まれるとフェードインされるようにしたいと考えています。
最初に load() メソッドでコールバック関数を使用しようとしましたが、この関数は HTML がフェッチされるとすぐにトリガーされますが、ブラウザーがすべての新しい画像をロードする前です。
次に、新しく取得したすべての画像に on('load') イベントを適用しようとしましたが、これはまったく機能しません。
$('#mydiv').load('/newcontent.html', function() {
$('#mydiv img').css('visibility','hidden').on('load', function() { $(this).fadeIn(); });
});
「visibility: hidden」は正常に機能するため、新しい HTML コンテンツが #mydiv に読み込まれ、すべての画像が非表示に設定されます。しかし、フェードインは機能しません。ここでバインドしようとしているイベントは、実際には、新しい HTML が読み込まれるとすぐにトリガーされますが (これは私には意味がありません)、個々の画像が読み込まれたときではありません。
どうすればこれを解決できますか? どんな助けでも大歓迎です！