Question

I am trying to make this infinite scroll script work the way i want.
However i can’t figure out, how to detect which posts are new in the loadmore.php file, so it won’t show the posts already on the page?

<script type="text/javascript">
$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
    {
        $('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>

Answer 1

Don’t try to ‘figure out’ which posts are new. Make sure that in your javascript you are aware of the post (through it’s id or otherwise) that was last loaded, and send that along to the ‘loadmore.php’ script.

Your webservice (loadmore.php) should remain stateless, and your frontend (javascript) should be aware of the state (last loaded id).