CSSとjavaScriptの読込みズレによる、崩れた要素が一瞬表示対策

ページ読み込み時に一瞬表示が崩れるのなぜ？

CSSとjavaScriptの読み込みについては、冒頭でお伝えしましたが、それ以外の原因は以下の理由が考えられます。

• CSSのアニメーションを組み合わせている

• ファーストビューにて、displayを使って、表示非表示を切り替えている。

• サイトで読み込んだ共存すべきCDNやプラグイン等が重く、読み込み速度の外的要因となる。

それではどのような処理をすれば、上記問題を解決できるか、
jQueryによる解決方法と素のjavaScriptによる解決方法の2つを紹介させていただきます。

jQueryによる解決方法

始めに、表示が崩れる原因となる要素を、display:none;にて非表示にします。

#sample {
  display:none;
}

fadeInメソッドにてフェードイン表示をします。

こうすることで崩れてしまっている要素を非表示としておいて、要素が整ったあとにfadeInメソッドが発動の流れとなります。また、パッとうつるのではなく、フェードして良い感じにします。jQueryだと非常にシンプルですね。

javaScriptによる解決方法

始めに、表示が崩れる原因となる要素を、display:none;にて非表示にします。jQueryと同じですね

#sample {
  display:none;
}

jQueryと違い、javaScriptは少々記述が混み合います。

崩れてしまっている要素をCSSで非表示にしておきます。さらにJSで透過にし、フェードインのアニメーションを設定します。その後、非表示から表示にきりかえ、１秒かけてトランスフェード処理が実行され、要素が整ったあとに表示される流れです。
こちらもjQueryと同じ、パッとうつるのではなく、フェードして良い感じにします。

まとめ

いかがでしたでしょうか。今回はサイトやページ読込時に、CSSとjavaScriptの読み込みズレによる崩れた要素が一瞬表示されてしまう対策方法について、紹介させていただきました。

jQueryであれば、簡素化した記述でシンプルに処理ができるので、通常のWEBサイトであれば、jQueryでよいかなと思います。しかし、ウェブアプリケーションに動的な効果を追加するなどの場合は、生のjavaScriptによる対処が必要になりますね。通常のWEBサイトに、jQueryかjavaScriptどちらを使用するか、人それぞれかと思います。しかし、今後も脱jQueryが進んでいく流れより、jQueryからスタートされている方は、多少なり、javaScript寄りな知識を身につけていくことも大事かもしれません。
(私はまだまだショートカットjQuery多様派でありますが)

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。