目標：
高さ0のコンテナに一連の画像があります。トリガーがクリックされると、コンテナをスライドさせて（アニメーション化）、画像を遅延ロードします（遅延ロードjQueryプラグインを使用）。
マークアップ:
<a href="#">Trigger 1</a>
<div class="container-1">
<img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
<img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
<img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
</div>
<a href="#">Trigger 2</a>
<div class="container-2">
<img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
<img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
<img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
</div>
// ETC
問題：
コンテナをアニメーション化するには、コンテナに高さを与える必要があります。現在、jQuery をすばやく使用してコンテナの高さを取得し、それを data-height 属性に格納してから、高さをゼロにアニメーション化します。問題は、実際に読み込まれる画像がはるかに高い場合に、読み込み中の gif の内部に基づいて高さを取得していることです。そのため、完全にロードされたコンテナーが 2000px になる場合、data-height 属性は 600px になる可能性があります。
すべき/できますか:
- 遅延ロードされる前に data-src 属性に格納されている画像の高さを取得し、それらを合計してから、コンテナーをその高さに設定します。
- コンテナを閉じたままにして、各画像をロードします。ロードしたら、それらを一緒に追加し、コンテナの高さを計算してから、下にスライドさせます（非常に遅くなるので理想的ではありません）。
- 他の提案はありますか？
キッカー:
このサイトはレスポンシブであるため、完全に読み込まれた画像の高さはブラウザーの幅によって異なります。