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

軽くなるんですかー？

軽くなりますよー

【サンプル】デフォルト

画像（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;
}

サンプルページはこちら

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

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

サンプルページはこちら

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

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

サンプルページはこちら

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

背景画像の要素に「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;
}

サンプルページはこちら

【サンプル】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>

lazysizes – cdnjs.com