以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。
-
-
超簡単！ホームページにスライドショー機能を実装する方法(JQuery)
自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい！ という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します！ ちなみに導入に成功すると↓このよ ...
続きを見る
しかし実際にスライドショーを設置した方々から、スライドショーを読み込む際に、一瞬画像がバラバラに表示されてしまうという報告をいただきました。
▼画像が重いと、ページ読み込み時にこのようにスライドショーが一瞬崩れて表示されてしまう。
一瞬でもレイアウトが崩れてしまうと気になるしカッコ悪いですよね。そこで今回は、スライドショーの読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法についてご紹介します！
CSS行の追加
画像がバラける問題の解決法は超簡単、数行のCSS文を追加するだけで良いのです！（以前の記事で紹介した「bxSlider」スライドショーを設置していることが前提）
以下のCSS行を追加してください。
.bxslider li {
display: none;
}
.bx-viewport .bxslider li {
display: block !important;
}
上記のCSS行を適用することで、js行が動くまではスライドショーを非表示にしておき、js行が動いて（画像が読み込まれて）初めて「bx-viewport」でくくられ、スライドショーが表示されるようになります。
▼実際に適用してみた場合。ページ読み込み時はスライドショーは表示されていないが...
▼コンマ数秒すると、レイアウトの整ったスライドショーが出現する。
スライドショーを出現させた時のカクッとなる現象を防ぎたい場合
ちなみにこの方法では、スライドショーが出現する時にその分の空間が拡張されるため、一瞬全体的にカクッとなってしまいます。
もしこの現象が気になる場合は、以下の例で表すようにスライドショー全体を、idもしくはclass属性を付与した＜div＞＜/div＞で囲みます。
▼今回の例では"slideshow_box"というclass属性を付与した＜div＞で囲んだ。
<div class="slideshow_box">
<ul class="bxslider">
<li><img src="../images/sample1.jpg" width="668" height="350"></li>
<li><img src="../images/sample2.jpg" width="668" height="350"></li>
<li><img src="../images/sample3.jpg" width="668" height="350"></li>
</ul>
</div>
そしてスライドの縦と横の大きさをCSSで指定しておくことで、あらかじめスライドショーが出現する分の場所を確保しておき、カクッとなる現象を防ぐことができます。
▼スライドの大きさ（画像の大きさ）と同じ縦横の大きさをCSSで指定。
.slideshow_box{
width:668px;
height:350px;
}
対処法についての解説は以上です！もし対処法を試しても解決しない場合は、コメント欄よりご相談ください。
※その他、bxSliderスライドショーが正常に動作しない場合の対処法についても紹介しています。
-
-
[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ
以前このサイトの記事にて、jQueryで動作するスライドショー「bxSlider」の簡単な設置方法について解説しました。 すると、一部の方々から、スライドショーが正常に動作しないとの報告を少なからず頂 ...
続きを見る
