【Swiper】Lazyload時に画像読み込み前にaltテキストが表示される問題の解決策

SwiperでLazyloadのオプションを有効にしたときに、画像読み込み前に、画像が見つからない時のアイコンとaltテキストが表示される現象に悩まされました。

Lazyloadで今までこんな現象を見たことが無かったので、原因がわからなかったのですが検索したら見つかったのでメモしておきたいと思います。

SwiperのLazyloadオプション

Swiperのオプションとして以下を追加します。

preloadImages: true,
lazy:true,

HTML側は以下のようにします。

<figure class="detail-image swiper-slide">
  <img class="swiper-lazy" data-src="image.jpg" alt="XXXXX">
  <div class="swiper-lazy-preloader"></div>
</figure>

imgタグに

class="swiper-lazy"

を追加して、そのあとに、

<div class="swiper-lazy-preloader"></div>

を追加します。

LazyLoad displays a broken image icon when has alt text

LazyLoad displays a broken image icon when has alt text · Issue #3747 · nolimits4web/swiper

Using Chrome, when using LazyLoad on a gallery with alt text, images show a broken image icon before being loaded. When ...

github.com

.swiper-lazy:not(.swiper-lazy-loaded) {
display: none;
}

まとめ

上記のスニペットを追加したら、あっさり解決しました。