Splide.js で Lazy Load による画像非表示を防ぐ方法

Posted on by

問題点

Splide.js を使用している際に、Lazy Load（遅延読み込み）が影響し、サムネイル画像が data:image/png;base64,... のプレースホルダー画像になり、正しく表示されないことがあります。

解決策

JavaScript を使用して data-src の値を src に適用し、Lazy Load の影響を防ぎます。
また、Splide.js の設定で cover: false と lazyLoad: false を設定し、背景画像の自動適用を防ぎます。

Splide.js の設定修正

// Splide.js のサムネイルスライダー設定
// cover: false で背景画像を無効化し、lazyLoad: false で遅延読み込みを無効化

document.addEventListener('DOMContentLoaded', function () {
    var thumbSlider = new Splide('#sample-carousel', {
        fixedWidth  : 100,
        fixedHeight : 60,
        isNavigation: true,
        gap         : 10,
        focus       : 'center',
        pagination  : false,
        cover       : false, // coverを無効化
        lazyLoad    : false, // Lazy Load を無効化
        breakpoints : {
            600: {
                fixedWidth  : 66,
                fixedHeight : 40,
            },
        },
    }).mount();
});

ポイント

✅ cover: false → 背景画像としての適用を防ぐ
✅ lazyLoad: false → Splide.js の Lazy Load を無効化

data-src の画像を正しく適用するスクリプト

// Lazy Load の影響で `data-src` に画像URLが設定されている場合、src に適用し、表示を有効化

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.sample-slide img.lazyload').forEach(img => {
        if (img.hasAttribute("data-src")) {
            img.src = img.getAttribute('data-src'); // `data-src` の値を `src` に適用
            img.style.display = 'block';  // `display: none;` を解除
        }
    });
});

ポイント

✅ data-src の値を src にコピーすることで、Lazy Load の影響を解除
✅ display: none; になっている場合に display: block; を適用して強制表示

まとめ

Splide.js で Lazy Load の影響を防ぐには、

  1. Splide.js の lazyLoad: false を適用 して遅延読み込みを防ぐ
  2. data-src を src に適用するスクリプトを追加 し、正しく画像を表示させる

この方法を適用することで、Lazy Load による画像の非表示を回避し、
正しくスライダーを動作させることができます。