1行足すだけで解決。
症状
ページのファーストビューにslick.jsを仕込んでスライドショーを設置した。
PCだと普通に表示されるんだけど、スマホだと途切れてる。
そんな症状の対策。
原因
画像の読み込みが完了しないままスライドショーが始まってるから中途半端なものが表示されてる。
対策
画像を先に読み込んでおけばいい。
画像が読み込まれてからスライドショーを動かしてもいいんだけど、画像を読んじゃえばいい。
ということで、link rel=”preload”を使う。
<link rel="preload" href="【1枚目の画像url】" as="image">変だった環境で再確認して問題なければおしまい。
preload深堀り
ちなみにpreloadは画像以外にも対応していて、同時に複数書くこともできる。
<link rel="preload" href="【webフォント】" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="【1枚目の画像url】" as="image">詳細はこことか見ればいい。
リンク種別: preload - HTML: HyperText Markup Language | MDN
preload の値を 要素の rel 属性に設定すると、 HTML の の中で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリング...
developer.mozilla.org
調子こいていっぱい設定すると逆に重くなるので気をつけましょう。
コメント