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...
See Question&Answers more detail:os