目標:
高さ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 属性に格納されている画像の高さを取得し、それらを合計してから、コンテナーをその高さに設定します。
- コンテナを閉じたままにして、各画像をロードします。ロードしたら、それらを一緒に追加し、コンテナの高さを計算してから、下にスライドさせます(非常に遅くなるので理想的ではありません)。
- 他の提案はありますか?
キッカー:
このサイトはレスポンシブであるため、完全に読み込まれた画像の高さはブラウザーの幅によって異なります。