SWLLカスタマイズ｜メインビジュアル SwiperにLazyloadを適用する

SWELLのフロントページのメインビジュアルには、Swiperを使ったスライダーを利用できます。

とても便利なのですが、実際に使ってみるとLazyloadが有効になっていないことに気が付きました。

ここで言う、LazyloadというのはSwiperに用意されているLazyloadです。

ブラウザのnative lazyloadやLazysize.jsを使ったものとは別になります。

この記事では、SWELLのメインビジュアルに使われているSwiperにLazyloadを適用するカスタマイズをご紹介します。

Swiperで複数画像のスライダー読み込むと2枚目の画像が一瞬表示される

画像スライダーとして複数画像を指定しているとフロントページの読み込み時に2枚目以降の画像が一瞬見えてしまうのが気になりました。

これはSWELLの不具合というよりも、私のサイトのSwiperのjsの読み込みタイミングが遅い（footerで読み込んでいる）ためです。

Swiperが初期化される前にCSSでゴニョゴニョすることで解決できる感じもしましたが、SwiperにはオリジナルのLazyload機能があることを思い出しました。

SwiperのLazyloadを使うと、2枚目以降は遅延読み込みさせることが可能です。

今回の問題は解決できるはずです。

SwiperのLazyload機能とは？

SwiperのLazyload機能を使うには、HTMLをSwiperのAPIにのっとった構造にしておく必要があります。

公式のドキュメントが最新（v9 later）版のものしかないので、古いバージョン（v8まで）のlazyオプションの説明は以下にあります。

Swiper v9からはnative lazyloadで対応できるようです。SWELのSwiperはv9ではありません。

Since version 9 Swiper doesn’t have a specific lazy loading API, as it relies on native browser lazy loading feature. To use lazy loading, we just need to set loading="lazy" on images and add preloader element:

https://swiperjs.com/swiper-api#lazy-loading

SWELLはSwiperのLazyload機能に対応している？

ソースレベルでは対応しています。

しかし、使うためには、子テーマのカスタマイズが必要になります。

SWELLはSwiperのLazyload機能に対応カスタマイズ

parts/top/main_visual-slider.phpがSWELLのメインビジュアルのスライダーのソースになります。

SWELL_Theme::get_mv_slide_imgで画像のHTMLを生成しているのですが、この関数には隠しオプション”swiper”があります。

“swiper”を指定することで、swiperのlazyloadが有効になります。

parts/top/main_visual-slider.php変更前

<div class="p-mainVisual__inner swiper">
	<div class="swiper-wrapper">
	<?php foreach ( $slider_images as $i => $img_data ) : ?>
		<div class="p-mainVisual__slide swiper-slide c-filterLayer -<?=esc_attr( $mv_img_filter )?>">
			<picture class="p-mainVisual__imgLayer c-filterLayer__img">
				<?php echo SWELL_Theme::get_mv_slide_img( $i); // phpcs:ignore?>
			</picture>

parts/top/main_visual-slider.php変更後

<div class="p-mainVisual__inner swiper">
	<div class="swiper-wrapper">
	<?php foreach ( $slider_images as $i => $img_data ) : ?>
		<div class="p-mainVisual__slide swiper-slide c-filterLayer -<?=esc_attr( $mv_img_filter )?>">
			<picture class="p-mainVisual__imgLayer c-filterLayer__img">
				<?php echo SWELL_Theme::get_mv_slide_img( $i,"swiper" ); // phpcs:ignore?>
			</picture>

まとめ

SWELLのメインビジュアルのSwiperはLazyloadに対応しています。しかし、隠しオプションになっていて、カスタマイズしないと使えるようになっていません。

もし、メインビジュアルの画像読み込みで問題を抱えている場合は、子テーマに1つのファイルをコピーするだけで、使えるようになるので、自己責任で使ってみてください。