jQuery slickのスライドが、ロード直後だけ動きが速い

Question

こちらのslickスライダーを使っています。
http://kenwheeler.github.io/slick/

以下のように、オプションをつけて、使用しています。

		$('.slider').slick({
			arrows: false,
			infinite: true,
			autoplay: true,
			autoplaySpeed: 0,
			cssEase: 'linear',
			speed: 5000,
			slidesToShow: 7,
			slidesToScroll: 1,
			variableWidth: true,
			lazyLoad: 'progressive',
		});

※こちらは、以下の記事を参考にさせていただきました。
http://www.kopjapan.com/blog/web/jquery%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E5%8F%B3%E3%81%8B%E3%82%89%E5%B7%A6%E3%81%B8%E7%84%A1%E9%99%90%E3%83%AB%E3%83%BC%E3%83%97%E3%81%A7%E6%B5%81%E3%81%97%E7%B6%9A%E3%81%91%E3%82%8B%E3%82%A2

基本的には動作しているのですが、どうも「最初にロードしたときだけ」しばらく数秒ほど動き（スライドする速度）が速いのです。
まるで、「開始地点」に急いで戻るように動き、その後設定したスピードで流れ始めます。

これを解消する手段がわからないのですが、どなたかご存知でしょうか。

なお、LazyLoadで全部の読込が終わってから

$('.slider').slick("slickPlay");

としても、同じ現象が発生しました。
画像がロード済みでないことが原因ではないようです。

よろしくお願いします。

Comments

[x_x]

再現しませんでした。再現できるようなコードはあるでしょうか？

[morimasa]

非公開で作業中のサイトで、なかなか難しいですが、しばらく解決できなければ、用意できるか、検討してみます。

Answer 1

画像として表示せずに、要素の背景として表示してみてはどうでしょうか？
恐らく現状では

<div class="slider">
	<img style="width:100px; height:100px;" src="hoge01.jpg">
	<img style="width:100px; height:100px;" src="hoge02.jpg">
	<img style="width:100px; height:100px;" src="hoge03.jpg">
</div>

もしくは

<div class="slider">
	<div style="width:100px; height:100px;"><img src="hoge01.jpg"></div>
	<div style="width:100px; height:100px;"><img src="hoge02.jpg"></div>
	<div style="width:100px; height:100px;"><img src="hoge03.jpg"></div>
</div>

みたいな感じになっているのではないでしょうか？
これを

<div class="slider">
	<div style="background:url(hoge.jpg) center; background-size:cover; width:100px; height:100px;">&nbsp;</div>
	<div style="background:url(hoge.jpg) center; background-size:cover; width:100px; height:100px;">&nbsp;</div>
	<div style="background:url(hoge.jpg) center; background-size:cover; width:100px; height:100px;">&nbsp;</div>
</div>

としてみたらどうでしょう？

Comments

[morimasa]

ありがとうございました！こちらの方法で、基本的には解決しました。
ただ、あと１点だけよろしいでしょうか？

現在、レスポンシブでサイトを組んでいまして、画像がスマホのほうが小さくなっています。あまり通常ユーザには起こらないことかもしれませんが、ブレークポイントをまたいでウィンドウサイズを変化させると、やはりslickの中の画像サイズが変化したタイミングで、元々の課題と同様に「画像が走る」事象が発生します。
これはもう防ぐ手段はないのでしょうか。。

[OsCh]

話が複雑になってきたので、実際のソースを見ないとなんとも言えませんが、今回の場合はウィンドウのリサイズに対する挙動にあたるので、HTML側から修正するのは難しいと思います。
一応、可能性のある方法としては、slickでは、特定の画面サイズに応じて設定を変えられるので（responsiveという設定項目があります）スマホサイズ時に別の設定をしてみることで、挙動を回避できるかもしれません。

[morimasa]

こちらですが、結局解決は不可能で、通常ユーザには起こらない現象であり、そのような仕様だ、ということで話が落ち着きました。回答ありがとうございました。

Answer 2

憶測になりますが、ページの表示が全て完了する前に、slickの処理が始まっているのではないでしょうか？
なのでページの表示が完了した段階で溜まったタスクが一気に処理されているような気がします。

slickは任意でスタートさせることができるので、autoplayをfalseにして、何かのタイミングで処理を始めるようにするのはどうでしょうか？

↓は1秒待ってから開始するサンプルです

$('.slider').slick({
  arrows: false,
  infinite: true,
  autoplay: false,
  autoplaySpeed: 0,
  cssEase: 'linear',
  speed: 5000,
  slidesToShow: 7,
  slidesToScroll: 1,
  variableWidth: true
});

setTimeout( function(){
  $( '.slider' ).slick( 'play' );
}, 1000 );

Comments

[morimasa]

回答ありがとうございます！こちらでいただいた方法で、いったん回避はできました。が、手元の環境では、待ち時間を4秒以上にしないとうまくいきませんでした。
これでは、さすがに待ちすぎなので、さらに少し調査を進めました。結果、どうやら、「画像の実際のサイズ」≠「CSSで指定した画像サイズ」（縮小している）と、発生するようです。画像の実際のサイズをCSSで指定すれば発生しませんでした。
そこで、インラインで高さ・幅を（縮小するように）書いてみましたが、それでも再発しました。
どうしても、画像の実際のサイズのままで表示したときだけうまくいきます。
画像のサイズをリサイズするしかないんでしょうか。。

といった、現在の状況です。

[OsCh]

間違えて別スレッドで回答してしまいました。
↓を参考にしてください。