4

動的に作成した要素をappendした後に、その構造に対してスライドショー(bxSlider)を初期化するという処理を実装しようとしています。

この際、スライドショーを「①」で初期化しようとすると上手く初期化できず、
「②」の様にすると上手く動作します。

静的なHTMLであらかじめ構造を用意してから初期化を叩くと正常に動作する為、
HTMLの構造やbxSlider()プラグイン自体に問題があるようには思えません。

  • ①がNGで、②がOKとなる原因は何が考えられるでしょうか?
  • setTimeout()を使わずに意図する動作を実現することは可能でしょうか?

JS:

var htmlArray = (function(){
  // $.ajaxでサーバからjsonを取得し、要素を生成して配列に格納
  return myarray;
})();

var i = 0;
var $t = $('#target');

for (i; i < htmlArray.length, i += 1) {

  // 構造を順番にappend
  $t.append(htmlArray[i]);

  // 最後の1回が終わったらスライドショーを初期化したい
  if (i === htmlArray.length - 1) {
    htmlArray[i].ready(function() {

      // === ①これだと上手く動かない ===
      $t.bxSlider();

      // === ②これなら上手く動く ====
      setTimeout(function() {
        $t.bxSlider();
      }, 100);
    }
  }
}

bxSlider初期化直前のDOMのイメージ:

<div id="target">
  <div class="item"><a href="article-url">
    <p>Title String</p>
    <p><img src="img/img.jpg" /></p>
  </a></div>
  <div class="item"><a href="article-url">
    <p>Title String</p>
    <p><img src="img/img.jpg" /></p>
  </a></div>
  <div class="item"><a href="article-url">
    <p>Title String</p>
    <p><img src="img/img.jpg" /></p>
  </a></div>
</div>
3
  • こちらfor()内で初期化したい理由は何かありますか? このような形で初期化自体はできるようですが…。
    – Layzie
    Commented 2015年7月27日 12:32
  • 2
    情報が少なすぎます。擬似コードを示すのではなく、同じバグが再現するようななるべく小さい完全なコードをjsFiddleなどで示してください。そうでなければ、答えられるのはエスパーだけでしょう。/示されたJSコードには明らかに2箇所構文エラーがありますが、構文エラーのコードを示されても、それはバグ以前の問題です。「DOMのイメージ」というのも、「イメージ」では回答するための参考になりません。/ 一見したところ、$.ajaxで非同期に取得しているのに続くコードが同期的に書かれているのは疑わしい点です。setTimeoutを噛ますと動くのもその辺りの問題を示唆しているように思います。しかし、肝心の部分が「// $.ajaxでサーバからjsonを取得し…」とコメントで濁されていて何をしているのかわかりりませんので、問題を特定できません。 Commented 2015年7月27日 18:35
  • 画像の読み込みのせいですかね?img要素消したりloadイベントを使ったりしても再現しますか?
    – a10a
    Commented 2016年1月25日 22:52

2 件の回答 2

1

非同期に実行すれば”上手く”動くなら、$t.bxSlider()がhtmlArray.ready()の無名関数を呼ぶ後の処理に依存しているからでしょう。
ここでも何度も言われていますが、JavaScriptはシングルスレッドなのでsetTimeoutが実行されるのは必ず自分を呼び出したスレッドが終わった後です。(JavaScriptには同期待ちもないので必ずスレッドが終わった後です)
このプログラムだと、htmlArray[i].ready()が全部終わった後に実行すればうまく動くというなら、それは処理順に齟齬があるのでしょう。

0

公式ページのsamplesに reload sliderがありましたが、これで実現できるのではないかと思います。

http://bxslider.com/examples/reload-slider

違っていたらご容赦ください。

以上です。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。