[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes

スクリプトは外部ファイルを記述するだけ、レスポンシブ用画像の配置や設定はHTMLベースで記述できるスクリプトを紹介します。

超軽量(5.8KB)で、jQueryなど他のスクリプトは不要です。

レスポンシブ用画像を簡単配置 -lazySizes

lazySizes -GitHub

lazySizesのデモ

デモでは、lazySizesを使ったさまざまなデモを確認できます。

サイトのキャプチャ

デモページ

lazySizesの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

この軽量スクリプトは、head内なら他のブロッキング要素(スクリプトやスタイルシート)の後、bodyの最後なら他のブロッキング要素(スクリプト)の前に記述することをお勧めします。

Step 2: 画像の配置

画像の配置はシンプルなものからレスポンシブ用まで、HTMLベースで記述します。

最初の表示に低品質の画像(low-quality.jpg)を使い、その後に通常の画像を表示します。

srcで指定した低品質の画像を省略したもので、「.lazyload」を与えているので通常の画像が表示されます。
これが標準的な記述です。

srcsetとsizeの属性をもったレスポンシブ用の画像配置。
data-srcsetをシンプルに使うことで、レスポンシブ用の画像を簡単に配置できます。

picture要素を使ったレスポンシブ用の画像配置。
当スクリプトはimg要素だけでなく、picture要素もサポートしています。img要素に「.lazyload」を加え、ソースと画像要素にdata-srcset属性を使用します。

srcset属性があるレスポンシブ用の画像と自動サイズ属性。
自動サイズは正しいサイズの値を使えば、レスポンシブ用の画像をとことん簡単にします。

CSS3アニメーションを使用して、ビューポートを拡大・縮小することもできます。

top of page

©2016 coliss