Question

我正在尝试在到达页面底部时动态加载数据（使用onScroll事件处理程序）。我想要加载的数据主要是幻灯片放映，在它们后面（每个放在不同的div中），一个嵌入了vimeo的iframe。

问题在于，当我第一次访问页面时，幻灯片显示在正确的位置;图像被堆叠，悬停幻灯片暂停和恢复就像预期一样，iframe背后也是如此。但是当我点击页面底部时，会出现新的幻灯片，但幻灯片显示不起作用;图像没有堆叠。看起来他们失去了CSS。他们没有出现在正确的地方。

我觉得有些相关的代码。

这是幻灯片的CSS：

<!-- language: lang-css -->
.slides{
    z-index:10;
}
.slides.active{
    visibility:visible;
}
.imagen {
    position:relative;
    height:393px;
    width:700px;
    margin-left:10px;
    z-index:1;
}

这是幻灯片的JavaScript：

     <!-- language: lang-js-->

    $('.slides').cycle({
        fx: 'fade',
         speed:   1500,
        timeout: 70,
    }).cycle('pause');


    $('.imagen').hover(function(){
            $(this).find('.slides').addClass('active').cycle('resume');
        }, function(){
         $(this).find('.slides').removeClass('active').cycle('pause');
        });

这是在onScroll事件处理程序中加载更多内容的JavaScript：

      <!-- language: lang-js-->
     var loaded=false;
        $(window).scroll(function(){  
var WindowHeight = $(window).height(); 
            if($(window).scrollTop() +1 >= $(document).height() - WindowHeight){ 

                if ( !loaded ) {
                $("#loader").html("<img src='recursos/imagenes/loading_icon.gif' alt='loading'/>"); 
                var LastDiv = $(".videobox:last"); 
                var LastId  = $(".videobox:last").attr("id");
                var ValueToPass = "lastid="+LastId; /* create a variable that containing the url parameters which want to post to getdata.php file */loaded=true;}
                $.ajax({ 
                type: "POST",
                url: "data.php",
                data: ValueToPass,
                cache: false,
                    success: function(html){
                        $("#loader").html("");
                        LastDiv.after(html); 
                        loaded=false;}
                });
            }
        });

我会尽可能地接受所有评论/反馈，即使这意味着从头开始。

如果需要，我可以发布html或图片，或者提供更多关于正确行为的解释。

Answer 1

我想你叫这行

// Cycle plugin
$('.slides').cycle({
    fx: 'fade',
    speed:   1500,
    timeout: 70,
}).cycle('pause');

仅在页面加载一次后

。因此，该插件仅适用于开头的元素。您还应该激活通过ajax：

加载的新幻灯片的插件

$.ajax({ /* post the values using AJAX */
    type: "POST",
    url: "data.php",
    data: ValueToPass,
    cache: false,
    success: function(html){
        $("#loader").html("");
        LastDiv.after(html); /* get the out put of the getdata.php file and append it after the last div using after(), for each scroll this function will execute and display the results */
        loaded=false;
        // Assign cycle plugin again for the new elements.
        $('.slides').cycle({
            fx: 'fade',
            speed:   1500,
            timeout: 70,
        }).cycle('pause');
    }
});

此代码也使新加载的内容可以滑动。

在Ajax调用之后CSS不适用于幻灯片放映

1 个答案: