Lazy Load(画像の遅延読み込み)を実装する方法

基本

「ページを開いたタイミングで画像を読み込む」じゃなくて、「画像が画面に表示されたら読み込む」ってヤツ。

「Lazy Load」ってjavascriptのライブラリがあるので、それを使う。
使うライブラリはGitHubにいるのでダウンロードする。
使うのは「lazyload.min.js」。「lazyload.js」でもOK。

・Lazy Load
・GitHub：tuupola/jquery_lazyload
※2018/03/26時点で「Version: 2.0.0-beta.2」。

ver1とver2では記述が異なるので注意が必要。
※ver1だと画像を徐々に表示とかあるけど、ver2は無いっぽい。今後実装さるかもしれない。

サンプルソース

・「lazyload.min.js（or lazyload.js）」は読み込み必須（※jqueryもいるはず）
・必要に応じて「$(function(){ 〇〇〇 });」で囲んでやる。

基本

・画像のクラス名を「lazyload」にする。
・「data-src」に画像のPATHを記載。
・「src」は不要。
・「lazyload()」を実行する。

<img data-src="img/hoge1.jpg" class="lazyload">
<img data-src="img/hoge2.jpg" class="lazyload">
<img data-src="img/hoge3.jpg" class="lazyload">
・・・
<script>
  lazyload();
</script>

読み込まれるまでの間の画像（サムネイルやローディング画像）を表示させたい

・「src」に低画像のサムネイルやローディング画像のPATHを記載。

<img data-src="img/hoge1.jpg" src="img/thumbnail.jpg" class="lazyload">
<img data-src="img/hoge2.jpg" src="img/thumbnail.jpg" class="lazyload">
<img data-src="img/hoge3.jpg" src="img/thumbnail.jpg" class="lazyload">
・・・
<script>
  lazyload();
</script>

クラス名を指定したい

・「document.querySelectorAll()」で指定可能

<img data-src="img/hoge1.jpg" src="img/thumbnail.jpg" class="zebra">
<img data-src="img/hoge2.jpg" src="img/thumbnail.jpg" class="zebra">
<img data-src="img/hoge3.jpg" src="img/thumbnail.jpg" class="zebra">
・・・
<script>
  let images = document.querySelectorAll('.zebra');
  lazyload(images);
</script>

※▲サムネイルありの例。

ページの他のすべての要素がロードされてからnミリ秒後にトリガー

・「setTimeout()」を使う（下記は500ミリ秒後）

<img data-src="img/hoge1.jpg" class="lazyload">
<img data-src="img/hoge2.jpg" class="lazyload">
<img data-src="img/hoge3.jpg" class="lazyload">
・・・
<script>
  window.addEventListener("load", function(event) {
    let timeout = setTimeout(function() {
      lazyload();
    }, 500); 
  });
</script>