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

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公式