今回やりたいこと

今や画像の遅延読み込みは必須と言っても過言ではないほど、ページの読み込み速度が重視されるようになっています。
今回はlazyload.jsを使って画像の遅延読み込みをする＋画像が読み込み終わるまでaltテキストが表示されて不恰好になってしまうのを防ぐために画像を読み込み終わるまではスピナーアイコン（ぐるぐる回っているローディングの表示）を出す実装をしてみます。

実装方法

まずはlazyloadの機能を実装する必要がありますので、以下サイトを参考に以下を行います。

• jqueryの読み込み
• lazyload.jsの読み込み
• lazysizes.jsの読み込み
• imgタグをlazyload用となるように記述
• CSSを記述
• lazyloadを実行

jqueryの読み込み

まずはjqueryを読み込みましょう。バージョンには特にされない模様。
今回はバージョン3系を読み込ませました。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>

lazyload.jsの読み込み

CDNも発行されていますが、今回はGithubからjsファイルをダウンロードして、ローカルで読み込ませました。

lazyload.js Github

<script src="assets/js/lazyload.min.js"></script>

lazysizes.jsの読み込み

lazysizes.jsライブラリを読み込みます。
このjsはlazyload.jsによって遅延読み込みさせている画像が表示されたら、「lazyload」というクラス名を「lazyloaded」に変更してくれるというものです。

つまり、画像が読み込まれた瞬間というトリガーを作り出すことができます。

このトリガーを起点にスピナーアイコンの表示から読み込まれた画像に切り替わるするというわけです。

lazysizes.js Github

<script src="assets/js/lazysizes.min.js"></script>

lazysizesの導入方法に関しては、こちらの記事が大変わかりやすかったのでリンクを貼っておきます。

imgタグをlazyload用となるように記述

imgタグ（厳密にいうとその親要素）をHTMLに記述します。

<div class="lazyload">
  <img src="assets/img/test.jpg" data-original="assets/img/test.jpg" width="100" height="100" alt="テスト">
</div>

遅延読み込みさせたい画像をdiv要素で囲んでいます。そのdiv要素にclass「lazyload」を付与しましょう。

画像のパスは、src属性と、src-original属性に同じものを指定します。

width、heightの指定はCSSで指定してもOKです。今回は画像サイズが決まっていることを想定して指定しました。

CSSを記述（scss）

CSSを記述します。クラス名は独自のものを使用されている場合は適宜変更してください。
keyframesでスピナーアイコンのアニメーションを作っています。

// スピナーアイコンアニメーション
@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 画像が読み込まれるまで
.lazyload {
  visibility: hidden;
  position: relative;
  &:after {
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    z-index: 2;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid rgb(204, 204, 204);
    border-top-color: rgb(51, 51, 51);
    border-radius: 50%;
    content: "";
    animation: spinner .7s linear infinite;
  }
}

// 画像が読み込まれた後
.lazyloaded {
  visibility: visible;
}

lazyloadクラス（＝画像が読み込まれるまで）にスピナーアイコンを表示させるとともに画像を非表示にしています。
そしてlazyloadedクラス（＝画像が読み込まれた後）はvisibilityプロパティによって画像を表示するように切り替えます。

lazyload.jsとlazysizes.jsを組み合わせることで、CSSのみで綺麗な画像の遅延読み込みを実装することができました。
画像が多いECサイトなどでは大いに役立つのではないでしょうか。

タブなどで切り替えるような場合は、タブを切り替えた瞬間（ブラウザに表示される瞬間）にlazyloadが働くので、タブ切り替えの際にも一瞬スピナーアイコンが表示されるようになります。

初期ローディングの負荷をなるべく軽くしてあげるために、lazyloadをこれからも愛用していきたいです。

もっと手軽に実装できるよ〜って方がいましたらご連絡いただけると大変勉強になります！よろしくお願いいたします。

lazyloadを実行

lazyloadを実行するjsを記述します。

<script>
  $(function() { 
    $('.lazyload img').lazyload();
  });
</script>

さまざまなオプションが用意されていますので、こちらの記事などを参考に必要に応じてオプションを追加してください。

今回参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。

「lazyload.js 画像」等で検索すると同じような記事がたくさん出てきますのでぜひご参考にしてください。