Fiz um exemplo calculando a distância da div loader em relação à tela. Quando o loader entrar na tela, será feito o carregamento do conteúdo. No exemplo eu simulo uma página com altura de 2000px para ilustrar a entrada e a saída da div loader e os valores calculandos. Pode ver aqui no jsfiddle.
Este modelo server para você usar a div loader
como referência. Também é possível antecipar o espaço com $('#loader').offset().top - 50
, assim o evento vai ser executado 50px antes de o loader entar na tela. Quando entrar o loader, o conteúdo já vai estar carregado, sem que o usuário tenha que chegar até o final para carregar mais.
Criei outro jsfiddle com um exemplo simples, porém mais próximo de um infinite scroll
, mas apenas como ilustração de como calcular a entrada de um elemento que serve para disparar o evento. Adapte à sua necessidade.
content página 1
content página 2
content página 3
...
Carregando próxima página
JS base
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var elementOffset = $('#loader').offset().top;
var distance = (elementOffset - scrollTop);
if( distance < $(window).height() ){
// elemento 'loader' entrou na tela, hora de carregar mais uma página
$.post( 'artes4.php' , { ... }, function( data2 ){
// adiciona o conteudo na div content mantendo as páginas anteriores
$( "#content" ).append( data2 );
});
}
});
Não é uma boa ideia você manter limit = 5 e offset = 0
como parâmetros para o SQL.
- Falta validar essas 2 informações
- Pode-se alterar e fazer a paginação com mais registros do que os definidos.
Fiz uma atualização no jsfiddle e inclui a numeração da página como atributo class - você pode usar de outra forma, mudar o atributo, campo oculto... A primeira listagem você atribui 1 <div id="loader" class="1">
, o que corresponde à página 1 de qualquer listagem. Posteriormente quando fizer o loader via ajax você atribui +1 e tem seu loader com a referência para página 2, e assim por diante.
JS incrementando a paginação como atributo HTML
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var elementOffset = $('#loader').offset().top;
var distance = (elementOffset - scrollTop);
var i = Number( $('#loader').attr('class') ) + 1; // atribui +1 ao loader
if( distance < $(window).height() ){
$('#content').append('<p>Página' + i + '</p>');
$('#loader').attr( 'class' , i )
// elemento 'loader' entrou na tela, hora de carregar mais uma página
// `i` é a representação da página requisitada
$.post( 'artes4.php' , { pagina: i }, function( data2 ){
// adiciona o conteudo na div content mantendo as páginas anteriores
$( "#content" ).append( data2 );
});
}
});