Question

我有一个滑块通过Javascript加载幻灯片。我需要在这些幻灯片的顶部通过jQuery添加一个DIV元素（ID为＆＃34; home_slider_overlay＆＃34;）。

问题是，大约50％的时间，我在添加元素的代码是在滑块插件生成幻灯片之前执行的。

我尝试使用Imagesloaded jQuery插件但由于某种原因它似乎没有帮助。

这里是滑块的标记：

<div class="ls-wp-fullwidth-container" style="height: 500px;">
    <div class="ls-wp-fullwidth-helper" style="height: 500px; width: 1903px; left: -491.5px;">
        <div style="margin: 0px auto; visibility: visible; height: 500px; width: 1903px;" class="ls-wp-container ls-container ls-lightskin" id="layerslider_1">
            <div class="ls-webkit-hack"></div>
            <div class="ls-inner" style="background-image: url(&quot;http://my_site.com/wp/wp-content/uploads/2014/04/slider-bg.jpg&quot;); width: 1903px; height: 500px;">
                <div style="left: auto; right: 0px; top: 0px; bottom: auto; width: 1903px; height: 500px; display: none; visibility: visible;" class="ls-layer ls-animating">
                    Slide content
                </div>
                <div id="home_slider_overlay"></div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我添加额外元素的jQuery代码：

imagesLoaded( '.ls-layer', function() {     

        jQuery('#layerslider_1 .ls-inner').append('<div id="home_slider_overlay"></div>');      

    });

Answer 1

如果您知道必须添加的幻灯片数量，您可以执行一个间隔，如果滑块已渲染eveything，则每隔50ms检查一次，然后运行jquery。

var interval = window.setInterval(function() {
    if($(".slide_class").length == amount_of_slides){
        $('#layerslider_1 .ls-inner').append('<div id="home_slider_overlay"></div>');
        clearInterval(interval);
    }
}, 50);

将元素附加到由第三方插件动态生成的另一个元素

1 个答案: