How to lazy load items from mysql db like facebook and twitter (infinite scrolling)

Question

I know there are plugins to lazy load images. I have a coupon code site, on my category page for shoes in my DB I have 500 coupons that match. I don't want to display all 500 for obvious reasons. I only want to show 20 initially, and then as the user keeps scrolling down the page it loads more coupons. How would I go about doing this?

EDIT: I've got the ajax call working. Here is the code I'm using:

<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>

The problem I have now is how to get the right rows from the database everytime I scroll?

On the initial page load I'm doing this:

SELECT * FROM tblCoupons LIMIT 0,20

What should the mysql call look like in the loadmore.php file? I guess I need to increment a counter somehow....hmmm...

Answer 1

That's one feature on the internet that I hope goes away... but here's the deal-

On page load, you grab like 100 results or however many you want, then spit those into a container. On load, you use jquery to log the height of the content area on your site. Set the starting index so you know what to query for (obviously send the relevant page data in your ajax call), fetch the screen size and wait for scroll. On scroll you check the scrollTop offset plus window size to see if the user is at the bottom of the page within a reasonable threshold - in this case around 100 pixel tolerance. Make the ajax call and then append the results.

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

Then apply a scroll listener to 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

            }
        });
    }
});

... basically. This is not intended to be copy/ paste. but more like a generic guide to how I have done it in the past. You should also set provisions so this only fires once per intended event since .scroll() listens for any scroll movement.

hope it helps in some way.