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

サイト構築 -JavaScript

Post on:2016年2月22日

lazySizesのデモ

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

デモページ

lazySizesの使い方

Step 1: 外部ファイル

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

<head>
  ...
  <script src="lazysizes.min.js" async=""></script>
</head>
<body>
  コンテンツ
</body>

<head>

...

</head>

<body>

コンテンツ

</body>

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

Step 2: 画像の配置

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

<img
	alt="100%x200"
	src="low-quality.jpg"
	data-src="normal-quality.jpg"
	class="lazyload" />

<img

alt="100%x200"

src="low-quality.jpg"

data-src="normal-quality.jpg"

class="lazyload" />

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

<img class="lazyload" data-src="image.jpg" alt="Desert Road" />

1	<img class="lazyload" data-src="image.jpg" alt="Desert Road" />

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

<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" />

<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をシンプルに使うことで、レスポンシブ用の画像を簡単に配置できます。

<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>

<source

data-srcset="500.jpg"

media="(max-width: 500px)" />

<source

data-srcset="1024.jpg"

media="(max-width: 1024px)" />

<source

data-srcset="1200.jpg" />

<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属性を使用します。

<img
	alt=""
	data-sizes="auto"
	data-srcset="small.jpg 500w,
		medium.jpg 640w,
		big.jpg 1024w"
	data-src="medium"
	class="lazyload" />

<img

alt=""

data-sizes="auto"

data-srcset="small.jpg 500w,

medium.jpg 640w,

big.jpg 1024w"

data-src="medium"

class="lazyload" />

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

<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>