Slick Sliderで画像を遅延読み込みする3つの方法

Slick Sliderを使用してスライダーを実装する際、画像の遅延読み込み（レイジーロード）を行うことで、
ページの初期読み込み速度を向上させることができます。
この記事では、3つの異なる方法で画像の遅延読み込みを実現する方法を紹介します。

1. LazyLoadプラグインを使用する方法

LazyLoadプラグインを使用すると、画像がスクロールされてビューポートに入るときにロードすることができます。

ステップ1: LazyLoadプラグインをインポート

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

ステップ2: HTML構造の設定

<div class="my_slider">
  <div><img class="lazy" data-original="image1.jpg" alt="Image 1"></div>
  <div><img class="lazy" data-original="image2.jpg" alt="Image 2"></div>
  <div><img class="lazy" data-original="image3.jpg" alt="Image 3"></div>
</div>

ステップ3: JavaScriptの設定

$(document).ready(function(){
  $(".my_slider").slick({
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplaySpeed: 10000,
    dots: false
  });

  $("img.lazy").lazyload({
    effect: "fadeIn"
  });
});

この方法では、data-original属性に画像のURLを指定し、
画像がビューポートに入るときにロードされます。

2. Slick Sliderのレイジーロード機能を使用する方法

Slick Slider自体にレイジーロード機能が組み込まれているため、これを使用することもできます。

ステップ1: HTML構造の設定

<div class="my_slider">
  <div><img data-lazy="image1.jpg" alt="Image 1"></div>
  <div><img data-lazy="image2.jpg" alt="Image 2"></div>
  <div><img data-lazy="image3.jpg" alt="Image 3"></div>
</div>

ステップ2: JavaScriptの設定

$(document).ready(function(){
  $(".my_slider").slick({
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplaySpeed: 10000,
    dots: false,
    lazyLoad: 'ondemand'  // レイジーロードの設定
  });
});

この方法では、data-lazy属性に画像のURLを指定し、画像が必要なときにロードされます。

---

3. Intersection Observerを使用する方法

JavaScriptのIntersection Observer APIを使用して、画像がビューポートに入ったときにロードする方法です。

ステップ1: HTML構造の設定

<div class="my_slider">
  <div><img class="lazy-load" data-src="image1.jpg" alt="Image 1"></div>
  <div><img class="lazy-load" data-src="image2.jpg" alt="Image 2"></div>
  <div><img class="lazy-load" data-src="image3.jpg" alt="Image 3"></div>
</div>

ステップ2: JavaScriptの設定

$(document).ready(function(){
  $(".my_slider").slick({
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplaySpeed: 10000,
    dots: false
  });

  // Intersection Observerを使用したレイジーロード
  let lazyImages = document.querySelectorAll('img.lazy-load');
  let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        let img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy-load');
        observer.unobserve(img);
      }
    });
  });

  lazyImages.forEach(image => {
    observer.observe(image);
  });
});

この方法では、data-src属性に画像のURLを指定し、画像がビューポートに入るときにロードされます。

まとめ

これらの方法を使用することで、Slick Sliderの画像を遅延読み込みすることができます。
ページの初期読み込み速度を向上させるために、要件に応じて最適な方法を選択してください。
各方法には利点があり、プロジェクトの特性に合わせて適切に実装することが重要です。

Favorite