php - 如何从 mysql 数据库延迟加载项目，如 facebook 和 twitter(无限滚动)

Question

我知道有延迟加载图像的插件。我有一个优惠券代码网站，在我的数据库中的鞋子类别页面上，我有 500 张匹配的优惠券。出于明显的原因，我不想显示所有 500。我只想最初显示 20，然后随着用户不断向下滚动页面，它会加载更多优惠券。我该怎么做呢？

编辑:我已经让 ajax 调用正常工作了。这是我正在使用的代码:

<script type="text/javascript">
        $(window).scroll(function(){
            if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
                $('div#loadmoreajaxloader').show();
                $.ajax({
                    url: "loadmore.php",
                    success: function(html){
                        if(html){
                            $("#postswrapper").append(html);
                            $('div#loadmoreajaxloader').hide();
                        }else{
                            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                        }
                    }
                });
            }
        });
</script>

我现在的问题是每次滚动时如何从数据库中获取正确的行？

在初始页面加载时，我这样做:

SELECT * FROM tblCoupons LIMIT 0,20

loadmore.php 文件中的 mysql 调用应该是什么样的？我想我需要以某种方式增加一个计数器......嗯......

Answer 1

这是 Internet 上的一个功能，我希望它消失......但这是交易 -

在页面加载时，您可以抓取大约 100 个结果或任意数量，然后将它们放入一个容器中。在加载时，您使用 jquery 来记录您站点上内容区域的高度。设置起始索引，以便您知道要查询的内容(显然在您的 ajax 调用中发送相关页面数据)、获取屏幕尺寸并等待滚动。在滚动时，您检查 scrollTop 偏移量加上窗口大小，以查看用户是否在合理阈值内的页面底部 - 在本例中为 100 像素左右的容差。进行 ajax 调用，然后附加结果。

var screen_height = $('body').height();
var cur-y = $(window).scrollTop();
var screen = $(window).height();
var cur_index = 0;

然后将滚动监听器应用于正文...

$('body').scroll(function(){
    if($(window).scrollTop() + screen >= (screen_height - 100))
    {
      // make an ajax call to your server and fetch the next 100, then update
      //some vars
        $.ajax({
            url: "your_script.php",
            data: {cur_index:cur_index},
            success: function(){
                cur_index += 1;
                screen_height = $('body').height();

               // append content to your container

            }
        });
    }
});

...基本上。 这不是要复制/粘贴。但更像是我过去如何做的通用指南。您还应该设置条款，以便在每个预期事件中仅触发一次，因为 .scroll() 会监听任何滚动移动。

希望它能以某种方式提供帮助。