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 5

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.