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

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

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

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

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

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

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

背景画像の要素に「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』に必要なファイルを下記サイトからダウンロードします。

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

さいごに

ふわーっとしたパンが食べたいです
いいですねー、作りましょうー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)