プロが教えるわが家の防犯対策術！

おしえて

bxsliderで最初に縦に複数表示されるのを回避したい

解決済

  • 質問者：apricot1101
  • 質問日時：
  • 回答数：2件

bxsliderでスライドを作りました。ロード時に最初に縦に表示されるのを解消したいと思っています。
ロード中に、loading画像を最初に出す方法で解消しようとしていますが、
現在、loading画像が表示された状態で縦に画像も並んで表示されます。解消方法を教えて頂きたくどうぞよろしくお願い致します。

※レスポンシブで980以上は"container_1、それ以下は"container_2を表示されるようにしています。
※ページ全体のロード後ではなく、スライダー部分のロード後にbx_loader.gifを隠したいと思っています。

-HTML-
<div id="loading"><img src="images/bx_loader.gif"></div>
<div id="container_1">
<div class="bxslider1">
<div><iframe src="https://player.vimeo.com/video/AAAAA?autoplay=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></iframe></div>
<div><iframe src="https://player.vimeo.com/video/BBBBB" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
</div>
</div>

<div id="container_2">
<img src="images/cover.png" class="cover" />
<div class="bxslider2">
<div><img src="images/s1.jpg"></div>
<div><img src="images/s2.jpg" ></div>
<div><img src="images/s3.jpg" ></div>
</div>
</div>

-CSS-
#loading {
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
background: #fff;
opacity: 0.5;
position: fixed;
left: 50%;
top: 20%;
z-index: 10000;
border-radius: 15px;
padding: 5px;
}

<script>
jQuery(window).load(function(){
jQuery("#loading").hide();
});
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

参考程度に

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



実際に確認はしていませんので、考え方のみの回答です。


＞loading画像が表示された状態で縦に画像も並んで表示されます。
＞解消方法を教えて頂きたくどうぞよろしくお願い致します。
loading画像を表示している間は、当該部分は見えないようにしておいて、loading画像を消すタイミングで表示を入れ替えればよろしいでしょう。

要素を見えないようにする方法は、いくつか考えられます。
1）display:none　による方法
そのまま非表示になりますが、ライブラリなどの設定を非表示の要素に適用しようとすると、多くの場合初期設定がうまくいかないことがあります。（bxsliderがそうであるかは確認していません）
それなので、表示状態（あるいはサイズのある状態）になってから、初期設定をする必要があるかも知れません。

2）画面外に表示しておく方法
リバースマージンなどを設定することで要素を画面外において見えなくし、1）と同様に入れ替える。
こちらの方法であれば、ライブラリの初期設定は可能なケースが多いようです。

3）visibility:hidden又はopacity:0などを設定する方法
この方法の場合、レイアウトの際に要素の位置は確保されますので、1）、2）の際に起こるかもしれない、入れ替えの際のレイアウトが変わることは避けられます。
ただし、CSSの設定がどうなっているのかわかりませんが、初期状態が最終表示の状態（スライダーの状態）と異なるレイアウトになってしまうような場合は、この方法ではうまくいかない可能性があります。
（loading画像のサイズを同じ大きさにしておけば、1）、2）でも同様のことは可能です）

4）対象要素はそのまま表示し、オバーレイとして背景色などのdivをその上に被せてマスクする方法。
マスクを非表示にすることで、入れ替わります。
初期表示のレイアウトが異なると、3）と同様にうまくいかない可能性があります。


いずれの方法であっても、入れ替えるタイミングを測る必要があると思われますが、これについてはIMG要素やIFRAME要素（必要なものだけで可）のloadイベントをチェックすることで確認できると思います。
ただし、対象の画像等が複数あるので、どの時点で入れ替えと判定するのかは質問者様の意図次第ということになります。
ありそうなタイミングを列挙してみると
1）全部の画像の読み込みが終了した時
2）どれか一つでも読み込みが終了した時
3）最初の画像等の読み込みが終了した時
といった感じでしょうか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速ありがとうございます。
3)のやり方がいいのかなと試してみました。そして、jquery.bxslider.cssのなかに「.bx-loading」というのがあったのでこちらを使用してみようと少し変更致しました。

HTMLの最初の
＞＞<div id="loading"><img src="images/bx_loader.gif"></div>の部分を
<div class="bx-loading"></div>へ変更し、

CSSを以下のように変更してみました。
.bx-wrapper {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
background: #fff;
visibility:hidden;←追加
}
※#loadingは削除

<script>以下も変更
jQuery(window).load(function(){
jQuery("#loading").hide();←削除
jQuery(".bx-wrapper").fadeIn(0);←追加
});
</script>
1）全部の画像の読み込みが終了した時と思っています。

上記に変更すると、スライドの領域部分が真っ白で表示されたままとなりました。
何か他に変更する箇所、確認する箇所ございましたらどうぞよろしくお願い致します。

通報する
お礼日時：2018/03/12 15:33

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

No1です



調べている時間がとれないので、曖昧ですが・・・
jQueryのfadeIn等はopacityやdisplayの操作はしますが、visibilityの操作はしなかったように記憶しています。

おことわりしてあるように、No1の回答はbxslider側の処理を調べた上での回答ではありませんので、原理的に可能なものを挙げてはいますが、場合によってはやりにくいもの（相性があまりよくないもの）があるかも知れません。
そのあたりもご確認の上で方法を選択なさってください。


ごく簡単なサンプルを作成してみました。（時間がないのでかなり手抜きです）
上記同様に、bxslider側の動作を調べてはいませんので、かなり適当ですが一応動作すると思います。
方法はNo1の4）に相当するものです。
※ 「画像の読み込みを待つ」という部分だけのサンプルですので、その他に関しては省いています。
※ 外部参照のURLの"ｈttps"は"https"に修正（全角ｈ→半角h）してください。
　（この回答欄ではURLがリンクに変換されてしまうため）
※ サンプルでの画像のロード確認は原理だけのごく簡単な方法にしています。
画像のonloadイベントの発生数を数えているだけなので、例えば、（データが存在しないなどで）どれかがロードできなかったりすると永続的にマスクがかかったままの状態になってしまいます。
解消法の例としては、タイムアウト時間を設定しておいて、その時点で1つ以上読み込めていたらスタートするなどが考えられます。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
#container {
position: relative;
width: 500px; margin:0 auto;
overflow: hidden;
}
#bxslider, #bxslider img {
margin: 0; padding: 0;
width: 500px; height: 250px;
}
#bxslider { list-style-type: none; }

#mask {
position:absolute; top:0;
width:100%; height: 100%;
background-color: #FFF;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
</style>

<script src="ｈttps://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="ｈttps://cdn.jsdelivr.net/npm/bxslider@4.2.13/dist/jquery.bxslider.min.js"></script>
<link href="ｈttps://cdn.jsdelivr.net/npm/bxslider@4.2.13/dist/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">
$(function(){
var loadCheck = function(){
if (--imgCount>0) return;
slider.startAuto();
$("#mask").fadeOut(1000);
}

var slider = $('#bxslider').bxSlider();

var imgs = $("#bxslider img");
var imgCount = imgs.length;
for(var i=0; i<imgCount; i++){
var img = new Image();
img.onload = loadCheck;
img.src = imgs[i].src;
}
});
</script>
</head>
<body>

<p>前の段落</p>

<div id="container">
<ul id="bxslider">
<li><img src="A.jpg" /></li>
<li><img src="B.jpg" /></li>
<li><img src="C.jpg" /></li>
<li><img src="D.jpg" /></li>
</ul>
<div id="mask"><img src="loading.gif" /></div>
</div>

<p>後の段落</p>

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
No.1の際に記載した「.bx-loading」がうまく動いていなかったり、「.bx-wrapper 」が表示できなかったりと格闘していました。
そして以下で希望していた動作で動くようになりました！
※ロード画像は見た目がいまいちでやはり外しました。

HTMLは
<div id="loading"><img src="images/bx_loader.gif"></div>と
<img src="images/cover.png" class="cover" />を削除してあとは質問時のまま

CSSに
.bxslider1{display:none;}
.bxslider2{display:none;}
を追加

bxslider1、bxslider２実行処理の前に以下を追加
jQuery('.bxslider1').fadeIn(1500);
jQuery('.bxslider2').fadeIn(1500);

すると最初に領域がなく、その後bxslider1、bxslider２それぞれレスポンシブに応じて表示されるようになりました。
<img src="images/cover.png" class="cover" />があると、その部分だけ表示されてしまうのでs1.jpg、s2.jpg、s3.jpgに最初から重ねて画像にしてしまうことにしました。

あちこちいじっていて検索しているうちにこうした次第です。
スライダーの動画をもう少し修正したらなんとか今週アップできそうなところまでたどり着きました。
各所で教えて頂き本当にありがとうございました。

通報する
お礼日時：2018/03/13 15:56

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報