1

目標:

高さ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 になる可能性があります。

すべき/できますか:

  1. 遅延ロードされる前に data-src 属性に格納されている画像の高さを取得し、それらを合計してから、コンテナーをその高さに設定します。
  2. コンテナを閉じたままにして、各画像をロードします。ロードしたら、それらを一緒に追加し、コンテナの高さを計算してから、下にスライドさせます(非常に遅くなるので理想的ではありません)。
  3. 他の提案はありますか?

キッカー:

このサイトはレスポンシブであるため、完全に読み込まれた画像の高さはブラウザーの幅によって異なります。

4

2 に答える 2