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">詳細はこことか見ればいい。
rel=preload - HTML: ハイパーテキストマークアップ言語 | MDN
preload は 要素の rel 属性の値で、その HTML の の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができ...
developer.mozilla.org
調子こいていっぱい設定すると逆に重くなるので気をつけましょう。
コメント