Eu sei que existem plugins para carregar imagens preguiçosamente. Eu tenho um site de código de cupom, na minha página de categoria para sapatos no meu banco de dados, tenho 500 cupons correspondentes. Não quero exibir todos os 500 por razões óbvias. Eu só quero mostrar 20 inicialmente e, à medida que o usuário continua rolando a página, ele carrega mais cupons. Como eu faria isso?

EDIT: Estou com a chamada ajax funcionando. Aqui está o código que estou usando:

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

O problema que tenho agora é como obter as linhas corretas do banco de dados toda vez que rola

No carregamento da página inicial, estou fazendo o seguinte:

SELECT * FROM tblCoupons LIMIT 0,20

Como deve ser a chamada do mysql no arquivo loadmore.php? Acho que preciso incrementar um contador de alguma forma .... hmmm ...