lazysizes 遅延読込

まずは実装サンプルを確認

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

lazysizesの遅延読込

HTML

lazysizes 遅延読込を入れたい箇所に以下のソースを張り付け、適宜内容を修正する。遅延させたいイメージをdata-srcで読み込み、lazyloadというクラスをつけます。

<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6430.JPG" width="1280" height="851" alt="lazysizesの遅延読込"  class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6499.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6530.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6569.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6604.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6760.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6781.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6850.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6909.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6960.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_6982.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_7050.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_7191.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_7249.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>
<p class="lazyload-box"><img src="/images/common/dum_00.png" data-src="/images/img/SCT_7371.JPG" width="1280" height="851" alt="lazysizesの遅延読込" class="lazyload"></p>

js + cssの追加

footerに以下のソースを追加して、js + cssを読み込む

cssの変更

スマホorタブレットのcssに追記

参考サイト

  1. サイトが重いときに!画像をふわっと遅延表示させる「lazysizes.js」【レスポンシブ対応】【PageSpeed Insights改善】
  2. 公式サイトデモ