Q&A
勘ですが、jquery.bxslider2.js に bxSlider2 として定義しているのではないかと思います。
###前提・実現したいこと
サイトでbxSliderライブラリを使用しているのですが、
jquery-1.11.0.min.jsを非同期処理させるサイトの改修を行たところ、動かなくなってしまいました。
自分が担当になる2年くらい前に外部へ制作を依頼したしたもので、修正が困難になっています。
###発生している問題・エラーメッセージ
animation.js:40 Uncaught TypeError: $(...).bxSlider2 is not a function at HTMLDocument.<anonymous> (http://サイトのドメイン/表示するHTMLがあるパス/js/animation.js:40:62) at j (http://サイトのドメイン/pc/common/js/jquery-1.11.0.min.js:2:27136) at Object.fireWith [as resolveWith] (http://サイトのドメイン/pc/common/js/jquery-1.11.0.min.js:2:27949) at Function.ready (http://サイトのドメイン/pc/common/js/jquery-1.11.0.min.js:2:29783) at HTMLDocument.K (http://サイトのドメイン/pc/common/js/jquery-1.11.0.min.js:2:30128)
※bxSliderを二つ使用していて、bxSlider2はその一つです
animation.jsというのからbxSliderを呼んでいるのか？と思いますが
###該当のソースコード
ヘッダー部分
<head> ……… <!-- cmsが自動出力するエリア --> <script src="/pc/common/js/jquery-1.11.0.min.js" type="text/javascript" defer></script> <script src="/pc/common/js/libs.js" type="text/javascript" defer></script> <!-- 任意で記述できるエリア --> <script src="/pc/common/js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="/pc/common/js/libs.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"> <link rel="stylesheet" type="text/css" href="css/jquery.bxslider2.css"> <link rel="stylesheet" type="text/css" media="all" href="css/animation.css" /> <script type="text/javascript" src="js/TweenMax.min.js"></script> <script type="text/javascript" src="js/jquery.scrollorama.js"></script> <script type="text/javascript" src="js/jquery.scrollTo.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script type="text/javascript" src="js/jquery.bxslider2.js"></script> <script type="text/javascript" src="js/motio.min.js"></script> <script type="text/javascript" src="js/animation.js"></script> ……… </head>
animation.jsの40行目付近
$(function(){ // -------------------- // スクロール値を０に戻す。 // -------------------- // if( $(window).scrollTop() > 1500 ){ // window.location.href = "#"; // }; // ---------------------------------------- // sub-bx-slider // ---------------------------------------- var $bxSlider2 = window.$bxSlider2 = $('.sub-bx-slider').bxSlider2({ pagerCustom: '.bx-pager', controls: true }); // -------------------- // main-bx-slider // -------------------- var $bxSlider = $('.main-bx-slider').bxSlider({ pagerCustom: '.bx-pager', auto: true, autoDelay: 500, // speed: 1500, pause: 5000, onSlideNext: function(){ $bxSlider2.goToNextSlide(); $bxSlider.startAuto(false); }, onSlidePrev: function(){ $bxSlider2.goToPrevSlide(); $bxSlider.startAuto(false); }, controls: true }); $('.main-bx-slider').parent().parent().find('.bx-next').on('click',function(event) { $bxSlider2.goToNextSlide(); }); $('.main-bx-slider').parent().parent().find('.bx-prev').on('click',function(event) { $bxSlider2.goToPrevSlide(); }); // slideのprev/nextを非表示にする $(".bx-prev").eq(1).css("display", "none"); $(".bx-next").eq(1).css("display", "none"); });
スライダー部分
……… <div class="main-bx-slider"> <div class="slide"> …… </div> <div class="slide"> …… </div> </div> <div class="sub-bx-slider"> <div class="slide"> …… </div> <div class="slide"> …… </div> </div> ………
###試したこと
１）
上記のコードのように、deferをつけている箇所がCMSで勝手に出されるため
deferをつけないものを重複して記述しましたがダメでした。
２）
本番公開しているものは不具合が出ていないので、その記述をコピーペーストしてみましたがダメでした
ファイルの位置は動かしていないので、それ以外の要因ではと思っております。
どうぞよろしくお願い致します。
回答2件
0
ベストアンサー
jquery-1.11.0.min.jsを非同期処理
非同期で読み込むようにしたのであれば、動機的に呼び出している各種ライブラリより後に呼ばれる可能性が高く、その時点でjQueryが無い状態になり、bxSlider以外も動かないのではないかと思います。
deferをつけないものを重複して記述しましたがダメでした。
同一URLのファイルの扱いはブラウザによって変わる気がしますが、先に出た指定を優先するような気がします。（調べてません）
非同期の読み込み順を決められるライブラリなどを使うか、非同期をあきらめられるかどちらかではないでしょうか。
追記：
全ての script要素に defer をつければ動くかもしれません。
【scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…】
http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/
投稿2016/11/20 09:36
編集2016/11/20 09:49総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/20 11:29