slickスライダーで遅延読み込みさせる方法

スライダーのプラグインとしてよく使われている一つとしてslickスライダーが挙げられると思います。

今回はslickで遅延読み込みをさせたい場合の方法を紹介していきたいと思います。

通常遅延読み込みさせる場合には遅延読み込みのjsを自作するかプラグインを読み込ませないといけないですがslickだったらオプションだけで対応できるので便利なスライダーだと僕は思います。

遅延読み込みすることでロード時の読込みの負担を減らすことができますし読込みの速度を上げることもできると思います。

slickの遅延読み込み方法

<img data-lazy="xxx.jpg" alt="〇〇〇〇">

遅延読み込みをさせたい画像をdata-lazyで指定します。

たったこれだけです。簡単ですね。

jQuery('.slider').slick ({
        lazyLoad: 'ondemand'
});

lazyLoadオプションには「ondemand」と「progressive」2つのオプションが用意されています。

画像が表示されるタイミングで画像の読み込みが発生します。

こちらはbackgroundで画像を遅延読み込みをしてくれます。