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

2018年1月31日 Webのお困りごと

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

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

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

これはどうやら
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>

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

３営業日以内に担当者より返信いたします
ささいな事でもお気軽にお問い合わせください