當向下滾動時，加載與當前幻燈片相關的全寬幻燈片下載內容

我已創建完整頁面幻燈片，其中每張幻燈片都是各種文章的英雄圖像。這個想法是，您通過左右滑動幻燈片來瀏覽文章，然後閱讀每個文章的內容，然後向下滾動。所以我需要發生的是外部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"); 
     } 
    });

這不僅是clumbsy但由於其監聽每滾動事件，它將重複一遍又一遍加載相同的內容進入格。所以我徘徊這是什麼最好的解決方案？

來源

2015-07-06 Todd Padwick

最終解決了這個問題....我使用了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的內容）

來源

2015-07-06 07:10:53

當向下滾動時，加載與當前幻燈片相關的全寬幻燈片下載內容

回答

相關問題