JSスライドショーの画像が一瞬縦に並んで表示される問題

この件、たまに相談受けます。具体的にどんな現象かというと、スライダーの画像が例えば3枚あったとしたら、まずその3枚全部が上から順番に縦に表示されて、

■画像全てが縦に並んで表示される

しばらく時間が経つと正常にスライドが始まる〜という感じです。

■スライドされてる

こうなってしまう原因はほとんどの人の想像通り「読み込み」の問題です。

スライドの画像部分のHTMLは大体以下の感じです。

[crayon]

[/crayon]

このソースコードは特別CSSでレイアウトを指定していない限りは縦にずらっと並んで表示されます。

HTML/CSSが読み込まれて画像が縦にずらっと表示される
JavaScriptが読み込まれて制御されたCSSが反映される
JavaSciprtで意図されたCSSに応じたレイアウトが表示される

(3)に至るまでの間、つまりJavaScriptが読み込まれるまでの間は環境による時間の長短はあるにしても、そもそも画像は縦に並んでいるのです。

環境の問題でJavaScriptが読み込まれるまでの時間が長いと、縦にずらっと並んだ画像の表示がバッチリ目立ってしまうため、それが気になってしまうのです。

JSスライドショーの画像が一瞬縦に並んで表示されないようにする方法

私の場合、JavaScriptの読み込みを早くするために云々はあまり効果的でないのでこれはやりません。

ではどうするかというと、

基本的にスライドショー部分（包括するul,divなど）は非表示とする
一定時間後にその部分が表示されるようにする

です。

先の原因のところで触れた内容でもわかる通り、まずはHTML/CSSでの記述が先に読まれ、JavaScriptの読み込みが後になります。

HTML/CSSの読み込みの方が早いので、あらかじめCSSにおいてスライド部分は非表示（display:none）としておきます。

このままだとスライドは表示されることはないので、今度はJavaScriptでそこを表示（再表示）させるように書き足します。

具体的には以下の内容を追記します。

[crayon]
//CSS部分
#slider{ //ここのIDは任意で指定のものを
display:none;
}
//JavaScript部分

[/crayon]

「#slider」は「display:none;」としているので、HTML/CSSが読み込まれた初期の時点では非表示になっています。その後「$(‘#slider’).fadeIn(10000);」で、10秒後（単位はミリ秒なので）にフェードインして表示されます。そしてスライドが動き始める…という感じです。

要するに、スライドのJavaScriptが読み込まれるまでの時間稼ぎをするという発想です。