ページ読み込み時に一瞬表示が崩れるのを防ぐ方法

福田お役立ち 2018-01-31

こんばんは、福田です。

最近寒すぎですね、もう雪は年一くらいで冬を感じさせてくれれば十分です。

さてっ

サイトを開いた時、ページ読み込み時に一瞬表示が崩れる時ってありますよね。

「一瞬だから気にしなくていいじゃん」

って言ってしまえばそうなんですが、
クライアントによっては突っ込まれます。。。

これはどうやら
CSSとJavascriptの読み込みに僅かに時差があるからですね。

そこで、一瞬表示が崩れる要素をCSSで非表示にしておいて、
scriptでフェードインさせるという手を使います。

■CSS

#drawer-navigation{ 
	display:none;
}

#drawer-navigation{

display:none;

}

■script

<script type="text/javascript">
    $(window).load(function() {
		$('#drawer-navigation').fadeIn(0); 
    });
</script>

$(window).load(function() {

$('#drawer-navigation').fadeIn(0);

});

</script>

これで一瞬表示が崩れるのを防げます！

ページ読み込み時に一瞬表示が崩れるのを防ぐ方法｜名古屋市中川区のホームページ制作会社株式会社XIA(クロスアイエー)