RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.51 ~ No.60 > 記事No.53

[bxSlider]スライドショー読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法

← 前の記事

次の記事 →

bxSlider_barabara

以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。

関連:ホームページにサムネイル付きスライドショーを簡単に設置する方法(jQuery)

しかし実際にスライドショーを設置した方々から、スライドショーを読み込む際に、一瞬画像がバラバラに表示されてしまうという報告をいただきました。


▼画像が重いと、ページ読み込み時にこのようにスライドショーが一瞬崩れて表示されてしまう。


一瞬でもレイアウトが崩れてしまうと気になるしカッコ悪いですよね。そこで今回は、スライドショーの読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法についてご紹介します!

CSS行の追加

画像がバラける問題の解決法は超簡単、数行のCSS文を追加するだけで良いのです!(以前の記事で紹介した「bxSlider」スライドショーを設置していることが前提)


以下のCSS行を追加してください。


上記のCSS行を適用することで、js行が動くまではスライドショーを非表示にしておき、js行が動いて(画像が読み込まれて)初めて「bx-viewport」でくくられ、スライドショーが表示されるようになります。


▼実際に適用してみた場合。ページ読み込み時はスライドショーは表示されていないが...

▼コンマ数秒すると、レイアウトの整ったスライドショーが出現する。

スライドショーを出現させた時のカクッとなる現象を防ぎたい場合

ちなみにこの方法では、スライドショーが出現する時にその分の空間が拡張されるため、一瞬全体的にカクッとなってしまいます。

もしこの現象が気になる場合は、以下の例で表すようにスライドショー全体を、idもしくはclass属性を付与した<div></div>で囲みます。


▼今回の例では"slideshow_box"というclass属性を付与した<div>で囲んだ。


そしてスライドの縦と横の大きさをCSSで指定しておくことで、あらかじめスライドショーが出現する分の場所を確保しておき、カクッとなる現象を防ぐことができます。


▼スライドの大きさ(画像の大きさ)と同じ縦横の大きさをCSSで指定。


対処法についての解説は以上です!もし対処法を試しても解決しない場合は、コメント欄よりご相談ください。

※その他、bxSliderスライドショーが正常に動作しない場合の対処法についても紹介しています。

関連:[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ

関連記事はこちら

この記事に対するコメント

Comment Form is loading comments...

過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ