bxsliderにて読み込み後に内容を表示させたい

質問

jQueryにてbxsliderを使用しているのですが、
画像がスライドになる前に（読み込みがまだ終わってないのか）
一旦、縦にスライドさせる内容が並んでしまいます。
一瞬なのですが、見た目がよろしくないです。

スライド部分は準備が出来次第表示にするにはどうすれば良いでしょうか？
参考サイト
http://shingosato.com/demo/bxSlider/

このようにローディングのくるくるを出したいです。

これはbxslider側で何かをするのですか？
それとも別に何か設置するのでしょうか？

まるまるカスタマイズのとこを撮ってもいうまくいきません。
ちなみにWordpressを使用しています。

宜しくお願いします。

回答No.3

fujillin

ANo1、2です。

＞応急措置はこれでも十分です。
とりあえずは改善したようですので、原因の想像が当たっていた可能性が高いです。

＞理想は全てを読み込むまでくるくるローディングですが、
とのことですが、ANo1で回答しましたように、HTML解釈直後に（画像ロードと関係なく）bxsliderのイニシャライズを行なうことで改善するかもしれません。

具体的には、関連するＨＴＭＬの記述直後に、イニシャライズのスクリプトタグを入れてしまう方法です。
多分、現在のスクリプトは
　$(function(){　～　});
の形式になっているのではないかと思いますが、これを
　(function(){　～　})();
のようにして、即時処理にするというものです。

実際に全体がどのようになっているのかがわかっていなので、これでうまく行くという保証はありませんが…

回答No.2

fujillin

ANo1です。

＞縦にずらっと並ばせたくないのが目的です
それであるのなら、画像を読み込んでも並ばないようにしておけばDocument.Readyのタイミングでも問題ないと思います。

方法はいろいろ考えられますが、スクリプトを用いなくとも
　1）各画像を position:absolute; top:0; left:0; などで重ねておく
　2）display:none; または　visibility:hidden; などで非表示にしておく
　3）親要素のulに高さ・幅を与えて、overflow:hidden; などにしておく。
などのどれかで、対応可能かと想像します。

初期設定時にbxslider側である程度スタイルの再設定をしてくれているものと想像しますので、そのままでも問題ない場合もあると思いますが、そうでない時は上記の設定が悪影響を与える可能性があります。
bxslider側でDOM構成を変更しているので、構成が変わったら適用されなくなるようにセレクタの設定に工夫をしておけば、bxsliderでスタイルを再設定してくれていなくても自然に適用がはずれるので、設定しっぱなしでも問題なくなるでしょう。
例えば、 div#wrapper>ul.slider>li みたいなセレクタにしておくとか…

※ 原因の想定そのものがはずれていたら、効果は無いものと思います。

お礼

ありがとうございます。
overflow:hidden;
の方法で一応縦に並ぶ事はなくなりました。
問題はスタート画像をランダムにしてるのですが、
一瞬だけ、先頭の画像が出てランダムでのスタート画像に飛ぶくらいです。

理想は全てを読み込むまでくるくるローディングですが、
応急措置はこれでも十分です。

ありがとうございます。

回答No.1

fujillin

アイデアのみですが…

ローディング画像は自動で用意されているみたいですので、document.readyの前に画像がある程度読み込まれて表示されているのではないかと想像します。

それなので、対象のHTMLの記述直後にセッティングを記述して実行するようにするとか、別の方法なら、あらかじめ画像のリストを重ねて表示するようにしておいて（場合によっては非表示に設定しておいて直前に表示に切替えた後）、セッティングを実行するとかの方法で対応できないでしょうか。
（画像のロードに時間がかからなければ、これでもローディングの画像は出ないと思いますが…）

無理やりローディング画像を出すのなら、わざと時間がかかるようにカスタマイズするというのもあるかも。（gif画像を動かすには、スクリプト内で時間を使うのでなくsetTimeoutなどで時間差を設ける必要がありそうに思います）

検証はしていませんので、悪しからず。

お礼

ありがとうございます。
具体的にどう記述すればよろしいでしょうか？

ちなみに無理くりローディングを出したいわけではないです。
縦にずらっと並ばせたくないのが目的です。