jQueryにてbxsliderを使用しているのですが、
画像がスライドになる前に(読み込みがまだ終わってないのか)
一旦、縦にスライドさせる内容が並んでしまいます。
一瞬なのですが、見た目がよろしくないです。
スライド部分は準備が出来次第表示にするにはどうすれば良いでしょうか?
参考サイト
http://shingosato.com/demo/bxSlider/
このようにローディングのくるくるを出したいです。
これはbxslider側で何かをするのですか?
それとも別に何か設置するのでしょうか?
まるまるカスタマイズのとこを撮ってもいうまくいきません。
ちなみにWordpressを使用しています。
宜しくお願いします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
ANo1、2です。
>応急措置はこれでも十分です。
とりあえずは改善したようですので、原因の想像が当たっていた可能性が高いです。
>理想は全てを読み込むまでくるくるローディングですが、
とのことですが、ANo1で回答しましたように、HTML解釈直後に(画像ロードと関係なく)bxsliderのイニシャライズを行なうことで改善するかもしれません。
具体的には、関連するHTMLの記述直後に、イニシャライズのスクリプトタグを入れてしまう方法です。
多分、現在のスクリプトは
$(function(){ ~ });
の形式になっているのではないかと思いますが、これを
(function(){ ~ })();
のようにして、即時処理にするというものです。
実際に全体がどのようになっているのかがわかっていなので、これでうまく行くという保証はありませんが…
No.2
- 回答日時:
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
- 回答日時:
アイデアのみですが…
ローディング画像は自動で用意されているみたいですので、document.readyの前に画像がある程度読み込まれて表示されているのではないかと想像します。
それなので、対象のHTMLの記述直後にセッティングを記述して実行するようにするとか、別の方法なら、あらかじめ画像のリストを重ねて表示するようにしておいて(場合によっては非表示に設定しておいて直前に表示に切替えた後)、セッティングを実行するとかの方法で対応できないでしょうか。
(画像のロードに時間がかからなければ、これでもローディングの画像は出ないと思いますが…)
無理やりローディング画像を出すのなら、わざと時間がかかるようにカスタマイズするというのもあるかも。(gif画像を動かすには、スクリプト内で時間を使うのでなくsetTimeoutなどで時間差を設ける必要がありそうに思います)
検証はしていませんので、悪しからず。
ありがとうございます。
具体的にどう記述すればよろしいでしょうか?
ちなみに無理くりローディングを出したいわけではないです。
縦にずらっと並ばせたくないのが目的です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- その他(自然科学) 中古で買った対物レンズの精度を確認できるものとして顕微鏡校正スライドは必要でしょうか? 2 2022/04/12 20:07
- その他(Microsoft Office) エクセルでの作成データをモニター画面内に収めたい。 1 2022/04/23 11:52
- PowerPoint(パワーポイント) パワーポイントのアニメーションについて 4 2023/06/14 16:25
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- その他(Microsoft Office) OneDrive Personalについて 1 2022/08/02 18:25
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
サムネイルにマウスオーバーで...
-
textareaに画像を表示したい
-
サムネイルをクリックするとコ...
-
Javascriptで指定した日付と時...
-
jCarouselとColorBoxの組み合わ...
-
1枚の画像をクリックすると複数...
-
JavaScriptとチェックボックス...
-
javascriptで毎月替わる画像
-
USEMAPでの指定区域にマウスオ...
-
Titanium クリックで画像を変更...
-
透過pngの透明部分以外をクリッ...
-
cookieによる画像切り替えについて
-
Javascript で共通の処理をどこ...
-
プラグイン識別_フラッシュflash
-
MAX関数を使ってからLEFT JOIN...
-
JavaScriptで変更した属性の元...
-
createElementで作成した要素を...
-
動的にHTMLコンテンツを吹き出...
-
同一ページ内で、任意の文字列...
-
カレントページ aタグではなく...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
画像ランダム表示、しかしダブ...
-
bxsliderにて読み込み後に内容...
-
画像を切り替えランダム表示
-
1枚の画像をクリックすると複数...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
小窓について教えて下さい。
-
スライダーを実装した場合、ペ...
-
スワップイメージが上手く動作...
-
USEMAPでの指定区域にマウスオ...
-
1枚の画像をクリックして複数の...
-
クリッカブルマップの一部分だ...
-
オンマウスで、画像切り替え+...
-
iframe内のリンク文字のマウス...
-
edgeでスクロールバーに色が表...
-
画像の上に画像リンクを貼る方法
-
prettyphotoの画像表示について
おすすめ情報