2

Estou tentando fazer o conteudo aumentar conferme o usuario desce a barra de rolagem, mas meu codigo parou aqui..

<script>
$(document).ready(function() {
var limit = 5;
var offset = 0;
var altura = 1000;
$.post( "artes4.php", { limit: limit, offset: offset }, function( data2 ) {
  $( "#artes4" ).html( data2 );
});
});


$(document).ready(function() {
    $(document).scroll(function() {
      if ($(this).scrollTop() + $(this).height() >= altura) {

var limit = 5;
var offset = 0;
var altura = 1000;
var limit = limit + 15;
var offset = offset + 15;
var altura = altura + 1000;

$.post( "artes4.php", { limit: limit, offset: offset }, function( data ) {
  $( "#artes4" ).append( data );
});

        } // fim do if
    }); // fim scroll
});
</script>

PHP

$limit=$_POST['limit'];
$offset=$_POST['offset'];

$query = mysql_query("SELECT * FROM `artes4` ORDER BY `imagem` ASC LIMIT $limit OFFSET $offset") or die(mysql_error());
while ($row = mysql_fetch_array($query))

Ele mostra os primeiros resultados só que quando eu desco não aparce mais...

a linha com problema é essa:

if ($(this).scrollTop() + $(this).height() >= altura) {

O PHP E O MYSQL ESTÂO FUNCIONANDO PERFEITAMENTE...ele lista os primeiros 5 resultados...

1
  • ao declarar a variavel altura nao coloca o var não. ao inves de var altura = 1000; use altura = 1000;
    – Euler01
    6/09/2014 às 0:22

2 Respostas 2

4

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 loader


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.

  1. Falta validar essas 2 informações
  2. 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 );
        });
    }
});
2
  • 1
    ótimo trabalho @Papa Charlie !! tive boas ideias e esclareceu várias dúvidas q eu tinha, obrigado!!!
    – Alan PS
    6/09/2014 às 15:22
  • É dessa forma que costumo fazer - usando o loader como referencia. Voce pode adaptar varias formas. Que bom que ajudou 6/09/2014 às 18:47
0

Depois da resposta do @Papa Charlie tive uma ideia necessária para funcionar no meu sistema:

<script>
var i = 0;
var b = 1;
var itens = 10;
$(window).scroll(function() {

    if( $(window).scrollTop() >= $(window).height() - screen.height )
    {
        i++;
        b++;
        if( i <= itens )
        {
        $.post( "artes4.php", { pagina: b, total: total }, function( data ) {
          $( ".artes4" ).append( data );
        });
        }
    }
});
</script>

Só dá o append quando chega no fim da rolagem...

JSFiddle

1
  • Ele esta carregando antes de chegar ao final da página 7/09/2014 às 10:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .