便利なスクリプトを使ってWebサイトを構築することが多いです。
私がよく使うのがトップページのメイン画像のスライドショーのスクリプトです。
一瞬、画像が縦に並んで少し時間がたつとスライドショーが始まることがあります。原因はCSS、jQueryファイルの読み込みの問題です。
photo credit: Lupe und Notebook via photopin (license)
ページコンテンツ
読み込まれる順番
- スライドショーのHTMLが読み込まれる
- スライドショーのCSSが読み込まれる
- スライドショーのJavaScriptが読み込まれる
（1）～（3）まで読み込まれる僅かな時間があって、その（3）まで読み込まれる一瞬画像が縦に並んでみえます。
一瞬表示される要素を表示されないようにする方法
ここからが本題です。
- JavaScriptが読み込まれるまで非表示
- JavaScriptが読み込まれたら表示させる
スライドショーのhtmlを囲っているCSS
この場合はスライドショーのhtmlを囲っている#slidershowを非表示にさせるためのCSS。
|
1 2 3 |
#slidershow{ display:none; } |
スライドショーのjavascript
|
1 2 3 4 5 |
<script type="text/javascript"> $(window).load(function() { $('#slidershow').fadeIn(0); }); </script> |
CSSで非表示にした#slidershowをフェードインで表示させる。
まとめ
この方法で一瞬表示されている要素を直せます。ソースのタグを綺麗にしたりして時間がかかるのをこの方法だとすぐに直せます。
[amazonjs asin="B00GQU2U9W" locale="JP" title="現場でかならず使われている CSSデザインのメソッド"]
