jQuery 滾動到頁面底部時加載內容

Question

當我向下滾動我的頁面加載更多時我需要做的

<div class="container">
<div class="news">News 1</div>
<div class="news">News 2</div>
<div class="news">News 3</div>
<div class="news">News 4</div>
</div>

我只有html網站，沒有PHP和MySQL，所有新聞都是一頁。 例如，當滾動到底部 500 像素時，加載更多內容

Answer 1

我認為使用 Javacript 中的延遲加載插件會做得更好。

但實現您想要的最簡單方法是按照以下步驟使用 Jquery：

1 - 計算 de Window 垂直尺寸（准備好文檔）

var element = $(window).height();

2 - 用元素頁面計算滾動和平衡

$(window).scroll(function(){
  var y = $(window).scrollTop();
    if (y >= element){
      // Do stuff, like append more elements
    }
});

Answer 2

如果您正在尋找延遲加載，這是一個關於如何在您的網站上獲得它的很好的分步教程。 我很快就在我的網站上完成了。

Answer 3

正確的代碼是：

 $(document).ready(function(){ var element = $(document).height(); $(window).scroll(function(){ var y = parseInt($(window).scrollTop()) + parseInt($(window).height()); if (y >= element){ $("#loader_bars").show(); //Make post to server from last id recieved } }); });

它沒有錯誤，我一直在使用.....另外，Mirakurun 所說的 lazyload 僅適用於圖像