如何懒加载来自mysql db的项目,如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

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

Answer 1

这是互联网上的一个我希望消失的功能......但这是交易 -

在页面加载时,您可以抓取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 ...

$('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()会监听任何滚动运动.

希望它在某种程度上有所帮助.