[0001]Lazy Loadで大量の画像を含むWebページの速度改善＆Swiperで画像スライド

■画像関連

一覧ページなどWEBページで個々の画像を表示する場合、一覧表示件数や画像数によってWEBページを開く速度がどんどん遅くなってしまいます。

そこでLazy Loadを利用して遅延ロードをします。ブラウザの画面領域内に存在する画像のみをロードし、画面領域外に存在する画像はロードしないことを実現するため、大幅に速度改善ができます。

画像のスライドには簡単に実現できるSwiperを利用したいと思います。

まず、https://unpkg.com/swiper/ここからswiper-bundle.min.cssとswiper-bundle.min.jsを取得し、任意の場所に配置します。

この例の場合、名前をswiper.cssとswiper.jsに変更し、それぞれ配置します。/css/swiper.css、/js/swiper.js

アローボタンを変更したいので、アローボタンの画像も配置し、swiper.cssに以下を追加します。

swiper.css

              
.swiper-button-prev,
.swiper-button-next {
  width: 16px;
  height: 16px;
  margin-top: -8px;
}
.swiper-button-prev {
    background: url(/images/icon/swiper-left.png) no-repeat center center / contain;
}
.swiper-button-prev::after {
    content: "";
}

.swiper-button-next {
    background: url(/images/icon/swiper-right.png) no-repeat center center / contain;
}
.swiper-button-next::after {
    content: "";
}

次にHTML側で先ほど用意したswiper.cssを<head>内に配置します。例：<link rel="stylesheet" href="/css/swiper.css">

swiper.jsを</body>の手前に配置します。例：<script src="/js/swiper.js"></script>

swiper.jsの後にswiperのJavascriptを追加します。

              
<script>
var swiper = new Swiper('.swiper-container', {
	  navigation: {
	    nextEl: '.swiper-button-next',
	    prevEl: '.swiper-button-prev',
	  },
	  loop: true,
	  autoplay: {
	    delay: 2000,
	    disableOnInteraction: true
	  },
	  pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true,
        },
      autoHeight: true,
	});
</script>

スクリプトの後にLazy LoadのJavascriptを追加します。

              
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
<script>
	lazyload();
</script>

これだけです！！

画像スライドのswiperのオプションは色々ありますが、利用しているのは以下になります。

loop: true→スライダーの最後までいったら先頭に戻る

autoplay:delay:2000→2000なので2秒ごとに自動スライド

autoplay:disableOnInteraction:true→操作されたら自動再生をストップ

pagination→スライダーが今何番目か分かる。typeはいくつかあり

autoHeight: true→高さに応じて自動で調整

最後にHTML側です！

xxx.html

              
<div class="swiper-container" style="width: 200px">
  <div class="swiper-wrapper">
    	<div class="swiper-slide"><img class="lazyload" data-src="http://www.xxx/1.jpg" alt="" width="200"></div>
    	<div class="swiper-slide"><img class="lazyload" data-src="http://www.xxx/2.jpg" alt="" width="200"></div>
    	<div class="swiper-slide"><img class="lazyload" data-src="http://www.xxx/3.jpg" alt="" width="200"></div>
    	<div class="swiper-slide"><img class="lazyload" data-src="http://www.xxx/4.jpg" alt="" width="200"></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

遅延ロードのLazy Loadを利用する場合、imgタグにclass="lazyload"を追加し、src属性ではなく、data-src属性で画像パスを指定します。

それだけです！！なんとも簡単に完成です。