slickで一瞬画面表示が崩れる現象の対策

slickで一瞬画面表示が崩れるという現象は、サイトを制作していればよく発生します。
皆さんも、Webサイトを見ているときにスライド画面が一瞬デザイン崩れを起こしてから綺麗になったという経験をお持ちではないでしょうか。

今回は、どうしてそうなるのかという原因と、それについての対策をお話しします。
slickはサイト制作ではかなりの頻度で使用されるので、しっかりと理解して対策してください。

slickで一瞬表示が崩れる原因

これは、slickで使用されるCSSが適用されるタイミングが原因です。

slickを使用する際に、HTMLにslick用のクラス名を書くと思います。
実際にdevtoolで確認してみると、
slick-initializedやslick-slide等のクラス名が勝手についてしまっています。

これらのCSSを確認してみると、どうしてなのかがよくわかります。
slick-slideではこういうcssが付与されています。

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

slickの横並びを実現しているのはこのクラスに適用されているfloatです。
float: left;の効果で横並びを実現しています。
ただ、slick-slideはslickが読み込まれた時に付与されるクラス名です。

ファイルの読み込みの順番として、
HTML、CSS、JavaScriptの順番で読み込まれますが、
HTML、CSSが読み込まれた段階では、HTMLとCSSが既に画面に表示されています。
JavaScript(今回はslickライブラリ)が読み込まれるまでの時間差で表示崩れが起こってしまうのです。

slickで一瞬表示が崩れる対策

では、どうするかというと、
色々対策はありますが一番簡単なのは、
slickが読み込まれる前と後でレイアウトが崩れないように予めHTMLにクラス名をつけておく
ということです。

こんな感じでslick-slideクラスを付けておきます。

<div class="slider">
  <div class="slick-slide"><img src=" alt=""></div>
  <div class="slick-slide"><img src=" alt=""></div>
  <div class="slick-slide"><img src=" alt=""></div>
</div>

そうすると、レイアウト崩れが発生しないはずです。
これが一番簡単でお手軽な対策だと思います。

まとめ

原因がわかれば対策としては簡単です。

現行サイトでも、この表示崩れが発生しているところが沢山見かけます。
仕事の体制にもよるのでしょうが、こういうところにも拘って制作できるとユーザにあれっ？という思いをさせることが減るかなと思います。

slickを使用する際にはしっかりと対策しましょう。

それではまた次回お会いしましょう。