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

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

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

slickの遅延読み込み方法

html

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

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

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

js

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

lazyLoadオプション

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

ondemand

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

progressive

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

コメント

タイトルとURLをコピーしました