質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3485閲覧

ローディング画面とbxsliderの共存JavaScript

mablue222

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/12/14 03:32

https://teratail.com/questions/73840
時間調整できるローディング画面を実装したいと思い、
こちらを参考に入れたのですが、
ローディング後、表示されるはずの「bxslider」を利用したスライドショーの
画像が表示されなくなりました。

こちら2つを共存するにはどの様にすれば良いのでしょうか?

###該当のソースコード

//ローディング var time=new Date().getTime(); jQuery(function(){ var h = $(window).height(); $('#wrapper').css('display','none'); $('#loader-bg ,#loader').height(h).css('display','block'); }); $(window).on('load',function () { var now = new Date().getTime(); if (now-time<=3000) { setTimeout('stopload()',6500-(now-time)); return; } else { stopload(); } }); jQuery(function(){ setTimeout('stopload()',10000); }); function stopload(){ $('#wrapper').css('display','block'); $('#loader-bg').delay(900).fadeOut(800); $('#loader').delay(600).fadeOut(300); } //bxslider jQuery(document).ready(function($){ $('.bxslider').bxSlider({ auto: true, controls: false, autoHover: true, pause: 5000 }); });

###試したこと
どちらかを外せば、どちらかが表示されるので
共存のところかとは思ってはいるのですが、
力足らずで。。。
お力をお貸しください。

###補足情報(言語/FW/ツール等のバージョンなど)
jquery2.0.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ソースコードの一部しか見えてませんのであくまで予想ですが、予想される原因と解決方を書かせていただきます。

$('#wrapper').css('display','none');

恐らくこちらが原因かと思います。

bxsliderは起動時に中に入っている画像の高さを取得して、その高さに合わせてスライダー自体の高さを調節するのですが、そのタイミングでdisplay: noneにより見えない状態になっていると、高さが取得出来ないので今回のような症状が発生してしまいます。

解決方法としては、

  1. display: noneを解除するタイミングでbxsliderを起動する
  2. そもそもdisplay: noneにしない

の2通りが考えられます。

1の方で解決される場合の例は以下の通りになります。

var time = new Date().getTime(); jQuery(function() { var h = $(window).height(); $('#wrapper').css('display', 'none'); $('#loader-bg ,#loader').height(h).css('display', 'block'); }); $(window).on('load', function() { var now = new Date().getTime(); if (now - time <= 3000) { setTimeout('stopload()', 6500 - (now - time)); return; } else { stopload(); } }); jQuery(function() { setTimeout('stopload()', 10000); }); var slider = null; // 追加 function stopload() { $('#wrapper').css('display', 'block'); $('#loader-bg').delay(900).fadeOut(800); $('#loader').delay(600).fadeOut(300); // ここから追加 // stoploadが複数回呼ばれる可能性がある模様なので、 // bxsliderが何回も起動されないよう条件分岐を入れています。 if (slider === null) { slider = $('.bxslider').bxSlider({ auto: true, controls: false, autoHover: true, pause: 5000 }); } // ここまで追加 } // ここから下にあったbxsliderの起動処理は削除

このようにstopload内で#wrapperdisplay: blockになる後にbxsliderを起動させると正常に動作するかもしれません。一度試してみてください。

投稿2017/12/14 10:49

sdmilieu

総合スコア73

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mablue222

2017/12/15 01:11

ご回答ありがとうございます! お教えいただいた記述で無事思うような動きになりました。 詳しいご回答に感謝します!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問