javascript - Flexslider 无法识别动态加载的内容？

Question

我正在使用 SoundCloud API 通过 Javascript 将艺术作品作为 ul 加载到 HTML 文档中，使用 instructions I found here , 然后使用 Flexslider 滑过封面的轮播(包裹在 li 标签中) .当列表项被硬编码到 HTML 文档中时，这工作正常，但是，当我使用加载脚本从 API 动态检索艺术品作为 img 并将它们注入(inject) DOM 时，尽管 Flexslider 脚本是在 SoundCloud 脚本之后加载的，但 Flexslider 不会注册它们在那里并向 li 添加必要的样式。谁能告诉我如何让 Flexslider 获取动态内容？这是我的文件:

HTML(片段)

<div class="page-container">
    <section id="work">
        <h3>Work</h3>
        <p>Check out my latest mixes below.</p>
        <div class="sc-stream">
            <ul class="cover-flow clearfix">
                <!-- Covers inject here -->
            </ul>
        </div>
    </section>
    <hr>
</div><!-- End page-container -->

<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="js/vendor/soundmanager2.js"></script>
<script src="js/sc-custom-player.js"></script>

<script src="js/flexslider.min.js"></script>
<script src="js/main.js"></script>

sc-custom-player.js

与 file found here 相同

主.js

$(document).ready(function() {

    $('.sc-stream').flexslider({
        namespace:  "sc-",
        animation:  "slide",
        selector:   ".cover-flow > li",
        slideshow:  false,
        controlNav: false,
        minItems:   1,
        itemWidth:  224,
        itemMargin: 8
    });

});

如果您还需要什么，请告诉我。提前致谢。

Answer 1

您可能需要稍微延迟才能让数据先完全加载？在我当前的元素中使用 setTimeout:

HTML

<div class="flexslider">
    <ul class="slides"></ul>
</div>

JS

$(function () {

function initGame() {
    // load xml data file (from same domain)
    // iterate xml elements and load <li>s into HTML variable

    $(HTML).appendTo('.slides');

    setTimeout(function () {
        startGame();
    }, 500);
}

function startGame() {
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        randomize: true,
        directionNav: false,
        touch: true,
        after: function (slider) {
            $(".flex-control-nav li").removeClass("active");
            $(".flex-active").parent().addClass("active");
        },
        itemMargin: 5
    });
}

initGame();

});