シェアする

  • このエントリーをはてなブックマークに追加

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

シェアする

  • このエントリーをはてなブックマークに追加

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

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

Slider

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

■スライドされてる

Slider 02

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

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

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

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

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

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



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

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

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

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

です。

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

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

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

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

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

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

実際のデモ

有名な「Nivo Slider」を例として拝借しました。

「★」がついているところに注目。

変更前/変更後を見比べると、変更後はスライド部分がゆっくりフェードインして表示されるのが分かるかと。



シェアする

  • このエントリーをはてなブックマークに追加

フォローする