[jQuery]ページローディングを付けるとスライダーが表示されなくなります。

###ページローディングを付けるとスライダーが表示されなくなります。

下記のようにサイトの読み込み時にローディングを設置したのですが、
設置したことで、bxslider.jsのスライダーが表示されなくなりました。

いろいろ探ってみると、append()というメソッドでページ全体を囲っている#pageに

display: none;を指定しているのが原因のようでした。

ローディングもスライダーもどちらも共存させることは可能でしょうか。

jQuery('head').append(
  '<style type="text/css">#page { display: none; } #fade, #loader { display: block; }</style>'
);
jQuery(document).ready(function() {
  jQuery('.loader_img').fadeIn(2000);
});
jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
  var pageH = jQuery("#page").height();
  //setTimeout関数でfadeOut()の実行を遅延させる
  setTimeout(function() {
    jQuery("#fade").css("height", pageH).delay(900).fadeOut(2000);
    jQuery("#loader").delay(600).fadeOut(1200);
    jQuery("#page").css("display", "block");
  }, 2000);
});

  jQuery(function(){
    jQuery('.top_product_list ul').bxSlider({
      auto: true,
      pause:8000,
      slideWidth: 300,
      minSlides: 4,
      maxSlides: 4,
      moveSlides:1,
      slideMargin: 0,
      pager: false,
      //controls: false //prev/nextを非表示
    });
  });

<div id="loader">
    <img src="loader_logo.png" class="loader_img" />
</div>
<div id="fade"></div>
<div id="page" class="hfeed site">
～～～
</div>

m.ts10806

2017/07/24 04:56

基本的な考え方かもしれませんが、ローディングしている最中に色々操作されると困りませんか・・？

jyoze

2017/07/24 06:42

ご返信ありがとうございます。困ります。それが原因だと思い、jQuery("#page").css("display", "block");の後に記述したりも試したのですが、うまくいきませんでした。。。

行動規範の内容に同意します

回答2件

javascript
1jQuery("#page").css("display", "block");

の後にbxsliderの処理を書く。
または、同じく上記の後に

javascript
1//sliderはbxsliderを処理する際に宣言。下記URL参照
2slider.reloadSlider();

参考HP（公式）

ではいかがでしょうか。

投稿2017/07/24 05:43

namimon

総合スコア726

jyoze

2017/07/24 07:14

ご回答ありがとうございます。ご教示いただいた方法で設置してみたのですが、スライダーは表示されるようになりましたが、今度はローディング画面が表示されないようです。

namimon

2017/07/25 00:37

お試しいただいたのは、どちらの方法でしょうか。テストサイトなどがあれば、それを見せていただくと助かります。

jyoze

2017/07/25 03:54

ご返信ありがとうございます。どちらも試させていただきました。テストサイトがありませんので、すぐに作成できるかわかりませんが、作成してみようと思います。

行動規範の内容に同意します

ベストアンサー

bxSliderを使ったことはありませんが、他のスライダー系ライブラリを使った経験からいうと、初期生成メソッドを呼び出すタイミングでは、そのタグは表示状態であってほしいもののようです。

display: none;を指定しているのが原因のようでしたと書かれていることからも、それが原因とみて間違いないと思います。

ですから、対策としては表示可能なタイミングで初期生成メソッドを呼び出すということになります。
具体的には、こうです。

javascript
1jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
2	var pageH = jQuery("#page").height();
3	//setTimeout関数でfadeOut()の実行を遅延させる
4	setTimeout(function() {
5		jQuery("#fade").css("height", pageH).delay(900).fadeOut(2000);
6		jQuery("#loader").delay(600).fadeOut(1200);
7		jQuery("#page").css("display", "block");
8		jQuery('.top_product_list ul').bxSlider({
9			auto: true,
10			pause:8000,
11			slideWidth: 300,
12			minSlides: 4,
13			maxSlides: 4,
14			moveSlides:1,
15			slideMargin: 0,
16			pager: false,
17			//controls: false //prev/nextを非表示
18		});
19	}, 2000);
20});