スクロール時に画像を遅延読み込み（正方形でトリミング＆レスポンシブ対応）

スクロール時にウィンドウ内に入ってきた画像を、順次遅延読み込みする。このサンプルでは画像の縦横比に関係なく正方形でトリミング＆レスポンシブ対応。

デモページを表示

CSS

補足

• 13～17行目：img 要素（透過PNG画像）の背景画像として表示させる設定。
• 19～26行目：画像コンテナの背景にローディング画像を表示する設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 3行目：data-bg 属性が付いた img 要素が対象。
• このサンプルでは、スクロール時に画像の上端がウィンドウ高さの半分を超えたら、data-bg 属性で指定した画像が表示されるようにしている。
• 11行目：画像の遅延表示後は data-bg 属性を削除。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 2～5行目：img 要素の data-bg 属性で遅延表示する画像を指定する。
• このサンプルでは、元の画像の縦横比に関わらず、正方形にトリミングされて表示される。

関連投稿

• 画像のレスポンシブ対応