slickで最初の画像以外を遅延読み込みにする

harada 1,095views 更新:2016年12月6日

slickではlazyLoadオプションが標準で用意されています。
slickのスライドですべての画像を一度に読み込むとページ表示完了までに時間がかかってしまいます。
そんなときこのlazyLoadオプションを利用することで、表示されていない画像は表示時に読み込ませることができます。

利用方法

(1) 遅延読み込みを利用したい画像はdata-lazyで記述します。

<img data-lazy="xxx.jpg" alt="それ以外の画像" />
<img data-lazy="xxx.jpg" alt="それ以外の画像" />
<img data-lazy="xxx.jpg" alt="それ以外の画像" />

(2) slickのオプションでlazyload=""を設定します。

$( '.slide_image' ) . slick ( {
  lazyLoad: 'ondemand',// or 'progressive'
  slidesToShow: 3,
  slidesToScroll: 1
} ) ;

参考:[jQuery] カルーセルライブラリ slick.js の lazyLoad オプションを理解する
slick公式

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません