なんにもない日の頭の中はこんなもんだったりする

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

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

きのこさん
軽くなるんですかー?
きのこさん
Webサイトがとっても軽くなりますよー

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

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

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

HTMLとCSSはこちら

HTML

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

CSS

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

HTMLとCSSはこちら

HTML

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

CSS

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

HTMLとCSSはこちら

HTML

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

CSS

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

HTMLとCSSはこちら

HTML

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

CSS

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

HTMLとCSSはこちら

HTML

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

CSS

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

azysizes – cdnjs.com

メモ

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

GitHub – lazysizes

lazysizes 公式デモサイト

さいごに

きのこさん
ふわーっとしたパンが食べたいですー
きのこさん
いいですねー、作りましょー

関連記事

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

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

オープンキャンパス|千里金蘭大学
オープンキャンパス|千里金蘭大学
ベランダは作らなかったんだ/窓の家と生活
つまんない つまんない