[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes
Post on:2016年2月22日
sponsors
スクリプトは外部ファイルを記述するだけ、レスポンシブ用画像の配置や設定はHTMLベースで記述できるスクリプトを紹介します。
超軽量（5.8KB）で、jQueryなど他のスクリプトは不要です。
lazySizesのデモ
デモでは、lazySizesを使ったさまざまなデモを確認できます。
lazySizesの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 |
<head> ... <script src="lazysizes.min.js" async=""></script> </head> <body> コンテンツ </body> |
この軽量スクリプトは、head内なら他のブロッキング要素（スクリプトやスタイルシート）の後、bodyの最後なら他のブロッキング要素（スクリプト）の前に記述することをお勧めします。
Step 2: 画像の配置
画像の配置はシンプルなものからレスポンシブ用まで、HTMLベースで記述します。
|
1 2 3 4 5 |
<img alt="100%x200" src="low-quality.jpg" data-src="normal-quality.jpg" class="lazyload" /> |
最初の表示に低品質の画像（low-quality.jpg）を使い、その後に通常の画像を表示します。
|
1 |
<img class="lazyload" data-src="image.jpg" alt="Desert Road" /> |
srcで指定した低品質の画像を省略したもので、「.lazyload」を与えているので通常の画像が表示されます。
これが標準的な記述です。
|
1 2 3 4 5 6 7 8 |
<img alt="" sizes="(min-width: 1000px) 930px, 90vw" data-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w" data-src="medium.jpg" class="lazyload" /> |
srcsetとsizeの属性をもったレスポンシブ用の画像配置。
data-srcsetをシンプルに使うことで、レスポンシブ用の画像を簡単に配置できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<picture> <!--[if IE 9]><video style="display: none"><![endif]--> <source data-srcset="500.jpg" media="(max-width: 500px)" /> <source data-srcset="1024.jpg" media="(max-width: 1024px)" /> <source data-srcset="1200.jpg" /> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="1024.jpg" class="lazyload" alt="image with artdirection" /> </picture> |
picture要素を使ったレスポンシブ用の画像配置。
当スクリプトはimg要素だけでなく、picture要素もサポートしています。img要素に「.lazyload」を加え、ソースと画像要素にdata-srcset属性を使用します。
|
1 2 3 4 5 6 7 8 |
<img alt="" data-sizes="auto" data-srcset="small.jpg 500w, medium.jpg 640w, big.jpg 1024w" data-src="medium" class="lazyload" /> |
srcset属性があるレスポンシブ用の画像と自動サイズ属性。
自動サイズは正しいサイズの値を使えば、レスポンシブ用の画像をとことん簡単にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<style> .teaser.lazyload { opacity: 0; transform: scale(0.8); } .teaser.lazyloaded { opacity: 1; transform: scale(1); transition: all 700ms; } </style> <script> window.lazySizesConfig = { addClasses: true }; </script> <div class="teaser lazyload" data-expand="-110"> <img data-src="image.jpg" class="lazyload" /> <h1>Teaser Title</h1> <p>...</p> </div> |
CSS3アニメーションを使用して、ビューポートを拡大・縮小することもできます。
sponsors
