【jQuery】ページ読み込み時、本来隠れる部分が一瞬だけ表示される事象への簡単対策

jQueryで作成するアコーディオンメニューやスライドショー、ギャラリーなどは、
部分的に非表示にし、マウスクリックやマウスオーバーで表示させる仕組みのものが大半です。

ページのレンダリング時に一瞬「非表示」が効かず全部が表示されてしまう、
といったことがあります。
ブラウザの性能や回線速度にも依存すると思いますが、
環境が悪い程表示されてしまう時間は長く、何とも残念な見た目になります。

ブラウザの読み込みルールに沿ってjavascriptを書き換えるなど対策は色々と考えられますが、
手っとり早いのは該当部分をCSSで非表示にしておき、javascript読み込み段階でフェードインさせる方法です。

【記入例：#mainimgをどうにかしたい場合】

■CSSへの追記

#mainimg {
	display: none;
}

 
 
■該当javascriptへの追記

$('#mainimg').fadeIn(1000)

 
※数字はフェードイン速度。即出すなら0で。
 
 
javascriptは以下の様に開始タグの後１行目へ書くと良いと思います。

$(function() {
	$('#mainimg').fadeIn(1000);
　　…以下続く

 
 
この方法では読み込み時に非表示になるため、その部分のページ上の役割によっては推奨できません。
問題無さそうな部分であれば、簡単で見栄えもよくなり一石二鳥ですのでお試しください。