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に追記