背景をフルスクリーンのスライドショーにするjQueryプラグインのスマホでの動作を改善したい。

Question

https://liginc.co.jp/designer/archives/7149
ここを参考に(丸々コピーですが…)背景をフルスクリーンでスライドさせようとしています。

PCで見る分には何も問題無く動作してます。
スマホ(android+chrome)で見ると、上下にスワイプしてアドレスバーが見え隠れするたびに背景がリサイズしてしまい背景が一瞬かくっとなってしまいます。
これはどうにかして改善できないでしょうか?
コピーして使ってるだけなので、修正箇所をそのまま教えてください。

また、背景画像を綺麗に見せようと思ったので、3000x2000位のサイズの背景を使おうとしているのですが、大きすぎてプログレッシブ付きjpgで保存しても表示に時間がかかってしまいます。(大体1.5～2M)
もう少し小さくしたいとは思うのですが、どのくらいのサイズの物を準備するのが最適でしょうか?
WQHDでも綺麗に表示するようにと思ってこのサイズにしてみましたが…

お願いします。

Comments

[Lhankor_Mhy]

https://teratail.com/help/avoid-asking

Answer 1

元ページを確認しました。
画像サイズは1024x682(214kb)なのでこの辺りのサイズから見せたいイメージに近づくよう試してみてはいかがでしょうか。

元ページをandroid+chromeで見てもandroid+ブラウザで見てもステータスバーの表示の有無にかかわらず
画像のリサイズは起こらなかったです。

原因がコードなのか画像サイズなのかを確認したほうが良いと思いますので、まずは画像サイズを小さくして同様の事象が起こるか確認をしてみてはどうですか。