ページ読み込み時の一瞬の表示崩れ対策

キュレーションサイト等の、1ページ当たりのデータ量が多いサイトを表示した時に、一瞬だけ表示が崩れてしまうことってありませんか？
ん？って思った時にはいつも通りの綺麗な表示に戻るものの、何だかちょっと気になる・・・。という方も多いはず！

気にしない人は気にしないけど、気にする人は気にする。
以前クライアントに突っ込まれた事がありました。

原因としては、cssとjavascriptが読み込まれるタイミングにズレが生じる為に発生しているんです。

そこで、表示が崩れる原因となる要素を、CSSで非表示にしておいて、javascriptでフェードインさせてみてはいかがでしょうか。

実装方法はいたってシンプル。

コード

■css

■javascript

こうすることでレイアウトが崩れている瞬間は非表示の状態で、レイアウトが整ってからフェードインさせることができます。フェードインのタイミングは各々変わってくるので、そこは調整が必要になります。

いかがでしょうか。
レイアウトが一瞬崩れた部分が見られてしまうのは何となく舞台転換中に明かりが点いてしまったような気まずさがありませんか？それをちょっと一手間加えることで、スマートな部分だけをお客さんに見せることができるので気になる方は実践してみてはいかがでしょうか。