動的に作成した要素を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>
for()
内で初期化したい理由は何かありますか? このような形で初期化自体はできるようですが…。$.ajax
で非同期に取得しているのに続くコードが同期的に書かれているのは疑わしい点です。setTimeout
を噛ますと動くのもその辺りの問題を示唆しているように思います。しかし、肝心の部分が「// $.ajaxでサーバからjsonを取得し…」とコメントで濁されていて何をしているのかわかりりませんので、問題を特定できません。img
要素消したりload
イベントを使ったりしても再現しますか?