たった２ステップで「Lazysizes」を使用し画像の遅延読み込みを行う手順！！
Step 1
まず、LazysizeをHTMLページ内に読み込みます。</BODY>タグの直前に下記のスクリプトをコピペします。
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.0.1/lazysizes-umd.min.js"></script>
Step 2
次にimgタグにlazyloadクラスを指定します。
<img class="lazyload" src="画像ファイルまでのパス">
設定はこれだけです。
以下検証手順です。
検証手順
当ページ自体もlazysizeを利用して遅延読み込みを行っているので、当ページを利用して検証手順をご確認いただけます。ただし、ライブドアブログを利用しているため、下記の通りとても深い階層にlazysizeを指定した画像が格納されています。
<body class="default_2012 page-article～
↓
<div id="wrapper">
↓
<div id="content">
↓
<div id="main">
↓
<div id="main-inner">
↓
<article class="article first-article" ～
↓
<div class="article-body" itemprop="articleBody">
↓
<div class="article-body-inner">
↓
<div class="sample">
検証 Step1
Google Chromeで行います。対象のWEBページを開き、右クリック→検証を選択します。
検証 Step2
lazyloadクラスを指定した画像のソース部分を確認します。すでに画像が読み込まれた画像のクラス名は『lazyloaded』。まだ画像が読み込まれていない画像はクラス名は『lazyload』となっています。
検証 Step3
ゆっくりWEBサイトを下にスクロールします。『lazyload』クラスのままだった画像の付近までスクロールすると、クラス名がオレンジ色になり・・・
クラス名が『lazyloaded』に変化し、このタイミングで読み込みが実行されたことが分かります。
以上で無事lazysizeを利用して画像の遅延読み込みが行えるようになりました。
