2020年12月9日水曜日

スクロール時に画像を遅延読み込み（アスペクト比指定＆レスポンシブ対応）

スクロール時にウィンドウに入ってきた画像を、順次遅延読み込みする（アスペクト比指定＆レスポンシブ対応）。

デモページを表示

CSS

補足
  • 28～63行目：クラス aspect-4x3、aspect-3x2、aspect-16x9 により、表示する画像のアスペクト比を指定できるようにしている。これらを指定しない場合、表示される画像は正方形にトリミングされる。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

HTML

補足
  • ここで使用しているサンプル画像のアスペクト比は４対３。
  • span 要素に frame-img クラスだけが設定されている場合は、正方形にトリミングされて表示される。
  • span 要素の frame-img クラスに加えて、aspect-4x3、aspect-3x2、aspect-16x9 のいずれかを指定すると、そのアスペクト比で画像がトリミングされて表示される（表示する画像とアスペクト比が同じ場合はトリミングされない）。

関連投稿

ラベル: , , , , , ,