Question

我正在使用Response JS和Flexslider - 您猜对了 - 响应式项目。该网站的幻灯片寻呼机将在两个不同的位置，具体取决于视口的大小，我正在使用Response JS来填充该代码。但问题是Flexslider在Response JS填充寻呼机代码之前初始化，因此Flexslider找不到它应该使用的寻呼机。

有没有办法在Response JS完成页面魔术之后初始化Flexslider插件？

我的标记是这样的：

<body data-responsejs='{
    "create": [
    { "breakpoints": [0,320,481,641,961], "mode": "markup", "prefix": "r" }
    ]}'
>
    <div data-r961="
        <ul class=&quot;flexslider-pager&quot;>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
        </ul>
    "></div>

    <div class="flexslider"><!-- Slideshow Here --></div>

    <div data-r481="
        <ul class=&quot;flexslider-pager&quot;>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
            <li><img src=&quot;whatever.jpg&quot; alt=&quot;whatever&quot;></li>
        </ul>
    "></div>

    <script src="jquery.js"></script>
    <script src="response.js"></script>
    <script src="flexslider.js"></script>
    <script>
        $('.flexslider').flexslider({
            manualControls: '.flexslider-pager li',
        });
    </script>
</body>

我尝试将jQuery和Response JS添加到页面的头部，但没有运气。

Answer 1

所以我想出了一个非常难看的解决方案：

function runPlugins(){
    $('.flexslider').flexslider();
};

Response.create({ 
    mode: 'markup', 
    prefix: 'r', 
    breakpoints: [0,600,820,901] 
}); 

jQuery(runPlugins);

我将Response JS数据属性从body标签中取出，并使用了Response.create方法。然后有人建议我让插件调用一个函数，然后在创建Response数据属性后调用该函数。我不知道它为什么会起作用，但确实如此。

延迟初始化一个jQuery插件直到另一个完成

1 个答案: