bxSliderで画像が一瞬縦に並んでしまう問題の解決方法

bxSliderというのはWebページ上にスライダーと呼ばれる複数画像をスライドショー表示することが出来る人気のjQueryプラグインです。

しかしこのスライダーはページを開いた直後にはスライド表示したい画像が縦に全て並んでしまうという問題がよく報告されています。

デモページ:http://osune.co/bxslider_demo

ページを開いた直後は縦に画像がズラリと並んでしまっています。
※確認できないようであればページ更新を何度かお試しを。

bxSliderの画像が縦にズラリと並んでしまう原因

これは大体みんなの想像通りだと思いますが、

  • ファイルの読み込み時間
  • JavaScriptの読み込み時間
  • HTMLの読み込み時間
  • CSSの読み込み時間
  • 通信の速度
  • サーバーの通信状況
  • 閲覧しているPCの処理速度

これらの全ての影響あります。複数の原因が複合的に関係していると考えられるのでまとめても良さそうな内容もあえて分けて列挙してみました。

一言で言うと情報の読み込み時間とその処理にかかる時間の間、最終的なレイアウトが整っていない中途半端なが見えてしまっているということなのです。

問題の解決方法

ファイルを軽量化する

ファイルの読み込み時間が問題なのであれば、それを軽量化することで改善できるのではないかという考え方です。しかし残念ながらこの方法では解決に至ることはないはずです。

ファイルの読み込み時間の高速化には限界があります。仮にこの軽量化を極限まで実施したとしても、ユーザー側の環境が不十分であれば期待するほどの効果もありません。

ただし、ファイルの軽量化に関してはこの問題が解決に至らなくても日頃から気をつけたいところです。ファイルが軽量化することにより、ページの読み込み速度自体は高速化されることは間違いないので、ユーザビリティの向上はもちろん、それを受けて検索エンジンに対しても好印象となります。

ページアクセス直後はスライダー部を非表示で、後に再表示させる

これはよく使われる有名な手法でして、基本的な仕組みと実装方法は以下のようになります。

  1. スライダー部を非表示(CSSのdisplay:noneを利用)
  2. ・・・ファイル読み込み/処理を完了するまで非表示・・・
  3. スライダー部を再表示させる(jQueryでCSSで非表示としていた部分を再表示)

HTML部分

CSS部分

※CSS/HTMLともに一例です

ここまでの内容だけであれば単純にページ上からスライド部分が非表示になってしまうだけですので、この後この部分を再表示させる必要があります。

JavaScript部分

準備が整ったので非表示であったものを1500ミリ秒後にfadeIn(フェードイン)するという感じです。

この他にも似たような発想でCSSを時間差で書き換えるような手法があります。

でも、これらの手法がうまくいかない環境も結構あるようです。例えばbxsliderがシステムの標準機能として組み込まれているなどの場合(WordPressのテーマとしてや、ASPの標準機能として組み込まれているなど)です。

こうなるとお手上げで、上述したような方法では全く効き目がない。あるいはbxsliderが動かないなどの自体が発生するようです。

Loadingを使う方法

Loadingってのは正式名称ってわけでもないと思いますが、ページが表示されるまでグルグルしているやつです。

image

 

↑大体こんなのが多いですね。これはGIFアニメでして、「loading generator」などでググればこれを作るための幾つかのWebサービスが見つかります。開発者さんに感謝ですね(=‘X‘=)

これをどう使うかというと、先ほどの方法とは全く逆の発想となります。こちらはスライダーの準備が整うまでは「Loading」を表示させておいて、スライダーの準備が整ったら「Loading」を非表示とする方法です。

デモページ:http://osune.co/bxslider_demo2

このグルグルはページ全体ではなくスライダー部分のみなど、部分的な対応もできますが、スライダー以外の部分でもファイルの読み込みなどにより一定の処理がかかる場所は他にもある(例えばSNSボタンなど)ので、どうせならと画面全体を隠すこととしました。

これであれば何もbsSliderだけでなくても、読み込みに時間がかかるので不格好に見えてしまうあらゆるものに対して目隠しをすることが可能です。

以下、同様にソースコードの例を表記します。

HTML部分

※「グルグル」の内容だけです。

CSS部分

※一例なので、適宜書き換えていただければと思います。

JavaScript部分

余談ですが、デモのページはWordPress上ですのでJavaScript部分は以下のように書いています。

このように書いています。WordPressではパッケージ内にjQueryが読み込まれているので、サーバー上にjQueryを置いたり、CDNなどを読み込まなくても良くて、上記のように書くだけで良いのです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">