自动加载内容向下滚动 [英] Auto load content on scroll down

问题描述

我正在django / webfaction创建一个博客。我的主页默认显示4个帖子（ urls.py 中的帖子在 queryset 中限制为4）。现在，我想加载四个帖子，一旦用户到达页面的底部，继续继续，直到最后一个帖子达到。如何实现这一点？

解决方案

如果要加载您的内容达到文档的极限底部，请使用以下代码：

  $（window）.scroll（function（）
 {
 if（$（window）.scrollTop（）== $ ）.height（） -  $（window）.height（））
 {
 //加载你的内容
} 
}）; 
  

如果要在达到100像素底层之前加载内容

  var load = false; 
 $（window）.scroll（function（）{
 if（！load&&（$（window）.scrollTop（）> $（document）.height（） -  $（window ）.height（） -  100））{
 load = true; 
 
 //你的内容加载调用到这里
 
 load = false; // reset加载一次内容的值
} 
}）; 
  

I am creating a blog on django/webfaction. My hompage currently displays 4 posts by default (posts are limited to 4 on queryset in urls.py). Now I would like to load four more posts once user reaches the bottom of the page and keep on continuing that until last post is reached. How to achieve this?

解决方案

If you want to load your content on reaching extreme bottom of document use following code:

$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
    {
          // load your content
    }
});

If you want to load content before reaching 100 pixel of bottom use

var loading= false;
$(window).scroll(function() {
    if (!loading && ($(window).scrollTop() >  $(document).height() - $(window).height() - 100)) {
        loading= true;

        // your content loading call goes here.

        loading = false; // reset value of loading once content loaded
    }
});

这篇关于自动加载内容向下滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！