Question

我创建了一个完整的页面幻灯片，每张幻灯片都是各种文章的英雄形象。想法是通过左右滑动幻灯片来浏览文章，然后阅读每个文章的内容，只需向下滚动即可。所以我需要发生的是外部html文件加载到幻灯片下方的div中，它必须与当前幻灯片相对应。

幻灯片为活动幻灯片提供了一个名为.rsActiveSlide的类，我使用它来获取当前文章ID。

这是我的jquery

    $(window).scroll(function(){
        var currentCaseStudy = $(".rsActiveSlide").children(".rsContent").attr("id");
        var y = $(this).scrollTop();
        if (y > 5) {
            $( "#caseStudy" ).load( "case-studies/" + currentCaseStudy + ".html" );
        }
    });

这不仅是这种内容，而是在监听每个滚动事件时，它反复将相同的内容一遍又一遍地加载到div中。所以我徘徊最好的解决方案是什么？

Answer 1

最终解决了这个问题....我使用了inview.js插件，并使用它来触发内容加载。

$(document).ready(function(){

$('.caseLoader.loading').bind('inview', function (event, visible) {
    if (visible == true) {
        var currentCaseStudy = $(".rsActiveSlide").children(".rsContent").attr("id");
        $( "#caseStudy" ).load( "case-studies/" + currentCaseStudy + ".html" );
        $(this).removeClass('loading');
        $("#caseStudy").removeClass('loading');

    } else {
    }
});


}); // doc ready

但如果有人有更好的方法做到这一点，那么我很乐意听到他们的解决方案。

（为了清除内容，我只是在更改幻灯片时清空div的内容）

向下滚动时，加载与当前幻灯片相关的全宽幻灯片下方的内容

1 个答案: