ページアクセス時に要素をフェードで表示させる時に、非表示にしている要素が一瞬見えてしまう場合の対応方法です。
状態について
CSSで要素にdisplay: none;を指定すれば対応できますが、JavaScriptオフの環境で要素が表示されなくなってしまいます。
(対応が不要の場合にはこれでもよいのですが。)
そのため、普段はJavaScriptで要素を非表示しているのですが、ページの重さによってはJavaScriptが読み込まれるまでの間の一瞬要素が見えてしまうことがあります。
HTML
<div id="contents"> <img> </div>
JavaScript
$(function() {
$('#contents').hide();
$(window).on('load', function() {
$('#contents').fadeIn(1000);
});
});
対応方法
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;
}
【参考サイト】
コメントが承認されるまで時間がかかります。