jQuery スライドショープラグイン Slickを使った時の挙動について、

Question

jQueryのスライドショープラグインslickをつかって、フェードインのスライドショーを実装しました。

実装自体に問題はないのですが、
ウィンドウ幅を大きくしたり、小さくしたりをドラッグしてやった時に、大きくする時は背景の白い部分が見えて、小さくする時は画像が一瞬大きい画面サイズのままで急にサイズが合う(わかりますかね…)

と言うふうに、画像が遅れて画面幅に合おうとついてくるのが気になります。

スライドショーなので、読込などで
多少のラグが出てしまうのかな？
と思うのですが、そういうものなのでしょうか？

もし対処できる方法があれば教えていただきたいです。
Web制作は勉強中で、自分でJsを組んでやるというのは無しで今回はお願いしたいです。。

よろしくお願いいたします。

参考デモページ
https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-1-2/6-1-2.html

実装にあたってコピーしたページ
https://coco-factory.jp/ugokuweb/move01/6-1-2/

Answer 1

その症状は処理を軽くするための正しい挙動です。
slickではウインドウサイズの変化に合わせ、要素の大きさをjsで調整します。その際ウインドウサイズの変化中に再計算しても、一瞬使われるだけで無駄な計算になってしまうので、サイズ変更が終わった時のみ調整の処理を行うようになっています。
これにより、数十～数百回行われていた処理が1回行うだけで良くなります。

この処理はdebounceと呼ばれます。（似たものにthrottleがあります）
throttleとdebounce | mille-feuille code

Comments

[yunoco_55]

返信が1ヶ月以上も遅れて申し訳ございません！
正しい挙動ならよかったです。確かに都度都度計算していたら重くなりますよね…
教えていただきありがとうございました。