bxsliderとローディングの設定を一緒にやったら、bxsliderが動きません。

Question

bxsliderとローディングの設定を一緒にやったら、bxsliderが動きません。
すごく困っております。教えて頂けたら幸いでございます。

--------------bxslider------------------------------------------------

<script type="text/javascript"> $(function () { $('#slider').bxSlider({ auto: true, pause: 4000, speed: 1000, controls: false, captions: true, useCSS: false, mode: 'fade' }); }); </script>

-------------ローディング-------------------------------------------------

<div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading..." /> <p>Now Loading...</p> </div> </div> <div id="wrap"> -------------------------------------------------------------- <script> $(function() { var h = $(window).height();

$('#wrap').css('display','none');
$('#loader-bg ,#loader').height(h).css('display','block');
});

$(window).load(function () { //全ての読み込みが完了したら実行
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
$('#wrap').css('display', 'block');
});

//10秒たったら強制的にロード画面を非表示
$(function(){
setTimeout('stopload()',10000);
});

function stopload(){
$('#wrap').css('display','block');
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
}
</script>

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

ずっとやっていたのですが、できなかったので、ローディングのやり方を違うもの（コピペ）でやったら両方動きました！！！お手数おかけ致しました。

下記が新しいローディングの方法です。

<div id="loader"> <img src="https://img21.shop-pro.jp/PA01376/817/etc/image.gif?cmsp_timestamp=20170829201808" alt="Now Loading..." width="80px" height="80px" /> </div> <div id="fade"></div> <div id="container"> ---------------------------------------------- <script type="text/javascript"> $('head').append( '<style type="text/css">#container { display: none; } #fade, #loader { display: block; }</style>' );

jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
var pageH = $("#container").height();

$("#fade").css("height", pageH).delay(900).fadeOut(800);
$("#loader").delay(600).fadeOut(300);
$("#container3").css("display", "block");

});
</script>