こんにちは。
いやー、Slick スライダーはとても便利なんですが、画像が大きかったりするとスライド時にカクカクしちうの?
今回ハマったので備忘録として残しておきます。
先ず、横幅100%で数枚をスライドさせるもので、スライド画像は横幅 1920px もあります。
問題は二つ。
1. ローディング時に一瞬サイズにフィットする前の大きいサイズのがチラっと見えてからリサイズする。
※ ローカルだと気付かないけど、アップしてネットで見ると分かる。
2. スライド時にカクカクしやがる
———-
1 は、最初 js で CSS の表示箇所の class の遅延表示を試みたけど上手く行かず。
あーだこーだ試した結果、流行りの lazy を導入。
js 読み込んで img に class=”lazyload” を追記して、src=”xxx.jpg” を data-src=”xxx.jpg” と書き換えるもの。
まどろっこしいw
もう少し調べてたら今はもっと簡単になっており、html に img src=”xxx.jpg” の後に loading=”lazy” を追加するだけでオッケーと?
マジっすかw
初期は Chrome のみだったらしいけど最近は Edge も FireFox もイケるっぽい。素晴らしい! (Safari は… 知らんです…)
スライド画像の1枚目にこう追記するだけ!
img src=”xxx.jpg” loading=”lazy” alt=””
というわけで 1 は解決。で、2 がねぇ、分からん!
スライド時にカクカクしやがるのは単純に画像が重いから?
js の speed: 遅くしたり、slick の読み込み位置を色々変えたりしたけど効果なし。
結果、意外な一行で解決した。
slick のスクリプトの functionn に useTransform: false を追記するだけ。
トランスフォームを off ると解決?なんでかねー、アニメーションが重いのかな?
ま、いーや、これで問題は二つとも解決!
———-
というわけで、超シンプルな slick ならいいのかもだけど、今回は下段にスライド毎にスライドするまでの時間を表示するバー (.dots-5) を付けたんで余計にわちゃわちゃしました。
ま、毎回問題が起こっては解決を繰り返すわけだけど、css ならまだいいけど js は時間食うのでハマると辛いですの…
ではではー