【保存版】Splide スライダーで画像が表示されない・崩れる原因はLazy Loadだった！skip-lazyで一発解決する方法

Posted on by

Webサイト制作で「軽量・高速・柔軟」なスライダーといえば Splide。
デザイン再現性も高く、WordPressや静的サイトでも幅広く利用されています。

しかし、Splide導入後に次のような症状に悩まされるケースも多いはずです。

  • スライダーの読み込み時に真っ白になる
  • サムネイルだけ透明画像のまま
  • 画像の高さが0pxになりレイアウト全体が崩れる
  • 背景に謎の透明PNG（base64）が表示される
  • <img> タグが勝手に display:none にされている
  • data-src のまま画像が読み込まれない

実はこれ、ほとんどのケースで Lazy Load（画像の遅延読み込み） が原因です。

本記事では、
Splide × WordPress × LazyLoad プラグイン
この組み合わせで発生するトラブルと、その解決方法を実際のコード例付きで解説していきます。

なぜ Splide と Lazy Load の相性が悪いのか？

最近のWordPressでは、以下のような仕組みが自動で働いています。

  • WordPress本体の loading="lazy"
  • 画像最適化プラグイン（EWWW / Jetpack / LiteSpeed Cache）
  • テーマ側のLazyLoad機能
  • Autoptimize / WP Rocket などの最適化プラグイン

これらは「ページの高速化」を目的に、ページ上にある <img> タグを次のように書き換えます。

▼ 典型的なLazy Load書き換え例

<img class="lazyload" 
     data-src="https://example.com/sample.jpg"
     src="data:image/png;base64,iVBORw0K..." 
     style="display:none;">

Lazy Loadの仕組みは、

  • 本物の画像 → data-src
  • 本物の <img> → 非表示にする
  • 代わりに極小の透明PNGを背景画像として表示させる
  • JavaScriptで画面に入った瞬間に本物を読み込む

という動作です。

しかし Splide は、

  • スライドの幅と高さを初期表示で計算する
  • <img> が非表示または 0px だと計算が成立しない
  • 背景の透明PNGが読み込まれてしまいズレが発生
  • そのままスライダー全体が崩壊する

という仕様上、「初期表示で画像が存在すること」が前提になっています。

つまり、
Lazy Load のせいで Splide が「画像なし状態」と認識してしまっているのです。

実際に起こったトラブル例

実際のコード例を見ると、背景に透明PNGが差し込まれています。

<div class="splide__slide thum is-visible" 
     style="background: url('data:image/png;base64,...') center/cover no-repeat;">
    <img class="lazyload" 
         data-src="https://example.com/img.jpg" 
         style="display:none;">
</div>

これは EWWW Image Optimizer などの LazyLoad が書き換えている典型例です。

この状態になると、

  • サムネイルがずっと透明
  • クリックしても画像が切り替わらない
  • 最初の一枚しか表示されない
  • レイアウトが崩れる

などの症状が100％再現します。

Lazy Load を解除する方法はいくつかある

プラグインの設定でLazy LoadをOFFにする（最も安全）

WordPress管理画面 → 使用しているプラグインの LazyLoad 設定をOFFにします。

例：EWWW Image Optimizer

設定 → EWWW Image Optimizer → 遅延読み込み → OFF

ただし、全サイトのLazyLoadがOFFになるため、ページスピードが落ちる場合があります。

最も確実＆安全：skip-lazy クラスを使う方法

LazyLoadプラグインの大半は、skip-lazy クラスが付いた要素は遅延読み込みの対象外にする
という共通仕様があります。

▼ 実際に使われたコード

echo "<div class='splide__slide thum skip-lazy'>
        <img src='""' alt=''>
      </div>";

これを追加するだけで、

  • data-src への書き換えが消える
  • class="lazyload" が付かなくなる
  • display:none が付かなくなる
  • 背景の透明PNGも出なくなる
  • Splide が正しく画像サイズを計算できる

つまり 完全な解決になります。

skip-lazy を付ける場所はどこ？

<div> に付ける方法

（EWWW・WP Rocket・Autoptimizeなどに有効）

<div class="splide__slide skip-lazy">

<img> に付ける方法

（Jetpack Lazy Loadなどに有効）

<img class="skip-lazy" src="〜">

どちらでもOKですが、div に付ける方が事故が起きにくくおすすめです。

実際に修正するコード例（WordPress + ACF ギャラリー）

before（LazyLoadが強制されてしまう）

echo "<div class='splide__slide'>
        <img src='" "' alt=''>
      </div>";

after（遅延読み込みを解除）

echo "<div class='splide__slide thum skip-lazy'>
        <img class='skip-lazy' src='""' alt=''>
      </div>";

どちらか一方でOKですが、両方に付けるとほぼ100% LazyLoad を防げます。

Splide の初期化側での注意点

LazyLoadが絡むと、初期化タイミングも重要です。

document.addEventListener( 'DOMContentLoaded', function () {
    var splide = new Splide( '#main-carousel', {
        type: 'loop',
        perPage: 1,
    } );
    splide.mount();
});

これで

  • DOM準備前に初期化しない
  • 画像が存在しない状態での mount を防ぐ

ことができます。

それでも直らない場合は？

以下のチェックをしてください。

テーマ側の LazyLoad（functions.php）

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

があるか？

LiteSpeed Cache の LazyLoad

Litespeed は CSS 背景画像まで遅延します。

Autoptimize の「画像を最適化する」

data-src が自動付与される場合があります。

LazyLoad の JS がエラーで止まっている

console error も確認しましょう。

まとめ：Splide が崩れる原因の80%は Lazy Load

Splide × WordPress LazyLoad のトラブルまとめ

症状原因解決策
画像が透明PNGになるLazyLoadが書き換えskip-lazy
画像が非表示（display:none）EWWW LazyLoadskip-lazy
スライダー初期化で崩れる画像が読み込まれていないskip-lazy / eager
サムネイルだけ動かないdata-src 使用skip-lazy
高さ0pxになるSplideが画像サイズを取得できないskip-lazy

最終的に「skip-lazy」が一番強い理由

  • プラグイン設定を変えなくてよい
  • SEO影響なし
  • 上部のみLazyLoad解除 → ページ速度を保てる
  • Splideだけ正常に動く
  • コード変更が最小

制作現場では、スライダー部分だけ LazyLoad を解除する
というのが最も合理的です。

この記事の想定読者へ（メッセージ）

本記事は Web制作者向けですが、クライアントにも説明しやすいように

  • 課題
  • 原因
  • 解決
  • 実例

が明確にわかる構成にしています。

Web制作現場では、プラグインが裏で大量の書き換えを行っているため、
Splideのように「画像の存在前提」で動くライブラリはよくトラブルが発生します。

もし「画像が出ない」「スライダーが崩れる」という相談を受けたら、
まずは Lazy Load が悪さをしていないか？ を確認してみましょう。

きっと今回の方法が役に立つはずです。