画像の遅延ロードを簡単に実装できる軽量スクリプト「Lazyestload.js」

Lazyestload.jsは、画像の遅延ロードを簡単に実装することができるスクリプトです。jQueryなどには依存せず、単体で動作します。

デモは以下よりご確認いただけます。

デモページを見る

画像が可視範囲に入って、かつスクロールが止まると画像が読み込まれます。

Lazyestload.jsの使い方

まずはGitHubからファイルをダウンロードします。dist/jsフォルダ内のある”lazyestload.js”を任意の場所に設置してください。

</body>の直前に以下を追加して、Lazyestload.jsを読み込みます。

<script src="js/lazyestload.js"></script>

最後に、「lazyestload」というクラスを画像に追加したら、実装完了です。

<img class="lazyestload" src="images/placeholder/sunset.jpg" data-src="images/sunset.jpg">

data-srcsetと一緒に記述する場合は、以下のようにします。

<img class="lazyestload" src="images/placeholder/sunset.jpg" data-srcset="images/sunset-1x.jpg 1x, images/sunset-2x.jpg 2x, images/sunset-3x.jpg 3x">

picture要素の場合は、imgにlazyestloadクラスを追加します。

<picture>
  <source media="(max-width: 400px)" data-srcset="images/sunset-400.jpg" >
  <source media="(max-width: 401px)" data-srcset="images/sunset.jpg" >
  <img class="lazyestload" src="images/placeholder/sunset.jpg" >
</picture>

デフォルトでは、画像にぼかしが入った状態になり、可視範囲に入ったら追加したlazyestloadというクラスが削除されることで画像が読み込まれる仕組みになっています。なので、CSSで簡単に読み込む前の状態をカスタマイズできます。

img {
  transition: filter 0.3s;
}

img.lazyestload {
  width: 100%;
  filter: blur(8px);
}

あとがき

簡単に画像の遅延ロードが実装できますね。サイトの画像を遅延ロードさせたい場合は、ぜひ導入をご検討ください。