【JavaScript】画像を遅延表示させる『lazysizes』の実装サンプル集

画像の遅延表示ができる『lazysizes.js』の使い方と、制作に役立つ実装サンプルをまとめました。
jQueryを使わずに実装できます。
画像をいっぱい使うサイトさんにはとってもおすすめです。
ページの読み込み速度がとっても早くなりますよ。

軽くなるんですかー？

Webサイトがとっても軽くなりますよー

1.【サンプル】デフォルト

画像（img）に「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。

See the Pen
lazysizes.jsで画像を遅延表示、デフォルト by 125naroom (@125naroom)
on CodePen.

<div class="section">
  <div class="imgBox">
    <img data-src="https://125naroom.com/demo/img/simple01.jpg" alt="" class="lazyload">
  </div>
  <div class="imgBox">
    <img data-src="https://125naroom.com/demo/img/simple02.jpg" alt="" class="lazyload">
  </div>
  <div class="imgBox">
    <img data-src="https://125naroom.com/demo/img/simple03.jpg" alt="" class="lazyload">
  </div>
</div>

.imgBox {
	text-align: center;
	margin: 50px 0;
}
.imgBox img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

サンプルページはこちら

2.【サンプル】フェードイン（ふわっと）で変わる

画像（img）に「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。

See the Pen
lazysizes.jsで画像を遅延表示、フェードイン（ふわっと）で変わる by 125naroom (@125naroom)
on CodePen.

<div class="section">
  <div class="imgBox fade">
    <img data-src="https://125naroom.com/demo/img/simple01.jpg" alt="" class="lazyload">
  </div>
  <div class="imgBox fade">
    <img data-src="https://125naroom.com/demo/img/simple02.jpg" alt="" class="lazyload">
  </div>
  <div class="imgBox fade">
    <img data-src="https://125naroom.com/demo/img/simple03.jpg" alt="" class="lazyload">
  </div>
</div>

.imgBox {
	text-align: center;
	margin: 50px 0;
}
.imgBox img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
.imgBox.fade img {
	opacity: 0;
	transform: translate(0, 50px);
	transition: 2s;
}
.imgBox.fade img.lazyloaded {
	transform: translate(0, 0);
	opacity: 1;
}

サンプルページはこちら

3.【サンプル】フェードイン（ふわっと）で変わるタイミングを変える

画像（img）に「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。

See the Pen
lazysizes.jsで画像を遅延表示、フェードイン（ふわっと）で変わるタイミングを変える by 125naroom (@125naroom)
on CodePen.

<div class="section">
  <div class="imgBox fade" data-expand="-50">
    <img data-src="https://125naroom.com/demo/img/simple01.jpg" alt="" class="lazyload">
  </div>
  <div class="imgBox fade" data-expand="-50">
    <img data-src="https://125naroom.com/demo/img/simple02.jpg" alt="" class="lazyload">
  </div>
  <div class="imgBox fade" data-expand="-50">
    <img data-src="https://125naroom.com/demo/img/simple03.jpg" alt="" class="lazyload">
  </div>
</div>

.imgBox {
	text-align: center;
	margin: 50px 0;
}
.imgBox img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
.imgBox.fade img {
	opacity: 0;
	transform: translate(0, 50px);
	transition: 2s;
}
.imgBox.fade img.lazyloaded {
	transform: translate(0, 0);
	opacity: 1;
}

サンプルページはこちら

4.【サンプル】背景画像を遅延表示させる

背景画像の要素に「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。

See the Pen
lazysizes.jsで画像を遅延表示、背景画像を遅延表示させる by 125naroom (@125naroom)
on CodePen.

<div class="bg_area lazyload" data-bg="https://125naroom.com/demo/img/simple01.jpg">
  <p>今日も楽しかったです</p>
</div>

.bg_area {
	padding: 20%;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.bg_area p {
	display: inline-block;
	font-size: 20px;
	background: #fff;
	padding: 20px;
	margin: 0;
}

サンプルページはこちら

5.【サンプル】iframeを遅延表示させる

iframeに「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。

See the Pen
lazysizes.jsで画像を遅延表示、iframeを遅延表示させる by 125naroom (@125naroom)
on CodePen.

<div class="move">
  <iframe class="lazyload" width="560" height="315" data-src="https://www.youtube.com/embed/L64VWQiQ3VU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.move {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin: 2.6em 0 1.6em;
	vertical-align: middle;
}
.move iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

サンプルページはこちら

『lazysizes』のダウンロード

まずは『lazysizes』に必要なファイルを下記サイトからダウンロードします。

GitHub – lazysizes

『lazysizes』の使い方

ダウンロードファイルの中で必要なファイルは以下の1点です。

• lazysizes.min.js
• ls.unveilhooks.min.js （背景画像の場合は必要）

※『min』のついてないファイルでもオッケーです。『min』が付いているファイルは改行などがない容量軽減版になります。

HTML

<script type="text/javascript" src="js/lazysizes.min.js"></script>
<script type="text/javascript" src="js/ls.unveilhooks.min.js"></script>（背景画像の場合は必要）

CDNを使う場合は、

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/plugins/unveilhooks/ls.unveilhooks.min.js"></script>

lazysizes – cdnjs.com

メモ

『lazysizes』のことで何かわからないことがあれば『lazysizes』公式サイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

GitHub – lazysizes

lazysizes 公式デモサイト

さいごに

ふわーっとしたパンが食べたいですー

いいですねー、作りましょー

関連記事

【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集