サイト制作に関するメモ書き

HOME > JavaScript > jQuery > 要素を非表示にした時の一瞬のちらつきを防止する

要素を非表示にした時の一瞬のちらつきを防止する

ページアクセス時に要素をフェードで表示させる時に、非表示にしている要素が一瞬見えてしまう場合の対応方法です。

状態について

CSSで要素にdisplay: none;を指定すれば対応できますが、JavaScriptオフの環境で要素が表示されなくなってしまいます。
(対応が不要の場合にはこれでもよいのですが。)

そのため、普段はJavaScriptで要素を非表示しているのですが、ページの重さによってはJavaScriptが読み込まれるまでの間の一瞬要素が見えてしまうことがあります。

HTML

<div id="contents">
<img>
</div>

JavaScript

$(function() {
	$('#contents').hide();
	$(window).on('load', function() {
		$('#contents').fadeIn(1000);
	});
});

JavaScriptで要素を非表示にした時のデモページ
 

対応方法

CSSで要素を非表示にして、JavaScriptオフ時はnoscriptタグで別のCSSファイルを読み込ませ、CSSの上書きで要素を表示させます。

head内

<link rel="stylesheet" href="./sample2.css" />
<noscript>
<link rel="stylesheet" href="./noscript.css" />
</noscript>

sample2.css

#contents {
	display: none;
}

noscript.css

#contents {
	display: block;
}

JavaScript

$(function() {
	$(window).on('load', function() {
		$('#contents').fadeIn(1000);
	});
});

要素を非表示にした時の一瞬のちらつきを防止するデモページ1
ただし、HTML4.01ではnoscriptタグをhead内に記述することは仕様上認められていないようです(HTML5ではOK)。
 

対応方法2

JavaScriptでbodyにclassを指定して、そのclassが付いている場合のみ要素を非表示にします。

<body>直下

<script>
	document.getElementsByTagName('body')[0].className = 'js-on';
</script>

CSS

.js-on #contents {
	display: none;
}

要素を非表示にした時の一瞬のちらつきを防止するデモページ2
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP