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

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

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

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

これは結論から言うと、スライダーを構成するファイル一式の読み込みに一定の時間がかかることに起因しています。

ファイルの読み込みが完了し、スライダーの最終的な完成形が表示されるまでの間、ページ上では中途半端な状態が表示されています。それが件の画像が縦にズラリと並んでいる状態です。

※最近のバージョンのbxSliderは改善が施されたのか、これがあまり発生しない気がします。

スライダーを構成するファイル一式

• 画像ファイル（スライド画像及び、bxSliderのパーツ等）
• JavaScript
• HTML
• CSS

これらが全て読み込まれるまではスライダーが完成しません。そしてそのファイル一式の読み込み速度は、以下の要素の影響も受けます。

• インターネット回線の通信速度
• サーバーの処理速度
• 閲覧しているPC（つまりユーザーのPC）の処理速度

これらはいずれも制作側で制御不能なものです。

問題の解決方法

ファイルを軽量化する

上述通り、ファイルの読み込み時間が問題なのであれば、ファイルを軽量化することで、読み込み時間を短縮し、改善できるのではないかという考え方が思い浮かびます。

しかし残念ながらこの方法では解決に至ることはないはずです。ファイルの軽量化には限界があり、そしてこれに関してはどれだけ突き詰められたとしても解決できるほどにはならないようです。

仮に制作側でかなりのところまでできたとしても、上述したインターネット回線の通信速度などの制御不能な要素が絡んできたとするとお手上げです。

とはいえ、ファイル軽量化自体はページの閲覧速度向上などのメリットがありますので、今回の問題を解決する目的は置いておいたとしても実施しておきたいものです。

Loaderを使う方法

これが今回の本命の方法です。

正式名称であるかどうかは不明ですが、Loaderというのは以下のように何かを読み込んでいることを伝えるための表現方法です。

この他にも棒グラフ状のものもあったりしますが、近年ではこのタイプが多いようです。これはGIFアニメでして、「loader generator」などで検索すると、自分好みにカスタマイズしたGIFアニメを作成できるサービスが見つかります。

• http://loadergenerator.com/
• http://www.ajaxload.info/

さてこのLoaderを用いてどのように表現するかと言いますと、これは実際に見てもらった方が早いと思います。

そこでLoaderを設置したものと、その比較としてのLoaderを設置していない普通のbxSliderのデモページをそれぞれ用意してみました。

• bxSliderデモ（Loaderバージョン）：http://anote.work/2102
• bxSliderデモ（オリジナルバージョン）：http://anote.work/2097

このように、スライダーの準備が整うまではページ全体を目隠し、準備が整ったら表示させることにより、画像が縦にズラリと並んでしまう状態を隠してしまうという方法です。

それではこれを実装する具体的な記述例を記載します。

HTML部分

<!--▼Loader-->
<div id="loader"> <img src="http://anote.work/wp-content/uploads/2017/08/image.gif" > </div>
<!--▲Loader-->
<!--▼bxSlider-->
<ul class="bxslider">
  <li><img src="http://anote.work/wp-content/uploads/2017/08/slidr-1.png" /></li>
  <li><img src="http://anote.work/wp-content/uploads/2017/08/slidr-2.png" /></li>
  <li><img src="http://anote.work/wp-content/uploads/2017/08/slidr-3.png" /></li>
</ul>
<!--▲bxSlider-->

後半は通常のbxSliderの記述ですが、冒頭にLoaderを表現するためのHTMLを追加しています。

CSS部分

#loader {
	width: 100%;
	height: 100%;
	margin: 0;
	background: #fff;/*Loaderの背景色としたいものを指定*/
	opacity: 1.0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000; /*一番前面に出るように（今回はbxSlidrの矢印が9999だったのでそれを超えるようにしました）*/
}
#loader img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -40px;/*Loaderの画像を縦方向中央に表示させるため、画像の高さの半分の40pxだけ上に移動*/
	margin-left: -40px;/*同様に画像の幅の半分の40pxだけ左に移動*/
}

このCSSは全てLoaderの表現のためだけの内容です。Loaderはページのある部分のみに適用する書き方もありますが、スライダーの準備が整っていないというのは、その他の何か（例えばSNSボタンなど）も準備が整っていないことが多いので、どうせならとページ全体を目隠ししてしまおうと考えて、全体を隠すような書き方としました。

JavaScript部分

$(document).ready(function () {
	$('.bxslider').bxSlider();
});
//▼ファイルの読み込みが完了したらLoaderを非表示とする
$(window).load(function () {
	$("#loader").hide();
});

前半は通常通りにbxSliderを動作させるための記述で、後半がLoaderを非表示とする記述です。

bxSliderデモ（Loaderバージョン）のソースコード一式

以上を用いて作成したのが先ほどのbxSliderデモ（Loaderバージョン）のページです。最後にこのページ上のソースコードを丸ごと記載しておきます。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://anote.work/demo/bxslider/jquery.bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="http://anote.work/demo/bxslider/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
<style>
#loader {
	width: 100%;
	height: 100%;
	margin: 0;
	background: #fff;/*Loaderの背景色としたいものを指定*/
	opacity: 1.0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;/*一番前面に出るように（今回はbxSlidrの矢印が9999だったのでそれを超えるようにしました）*/
}
#loader img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -40px;/*Loaderの画像を縦方向中央に表示させるため、画像の高さの半分の40pxだけ上に移動*/
	margin-left: -40px;/*同様に画像の幅の半分の40pxだけ左に移動*/
}
</style>
<!--▼Loader-->
<div id="loader"><img src="http://anote.work/wp-content/uploads/2017/08/image.gif" ></div>
<!--▲Loader--> 
<!--▼bxSlider-->
<ul class="bxslider">
  <li><img src="http://anote.work/wp-content/uploads/2017/08/slidr-1.png" /></li>
  <li><img src="http://anote.work/wp-content/uploads/2017/08/slidr-2.png" /></li>
  <li><img src="http://anote.work/wp-content/uploads/2017/08/slidr-3.png" /></li>
</ul>
<!--▲bxSlider--> 
<script>
$(document).ready(function () {
	$('.bxslider').bxSlider();
});
//▼ファイルの読み込みが完了したらLoaderを非表示とする
$(window).load(function () {
	$("#loader").hide();
});
</script>