0

essa paginação está funcionando perfeitamente, só tem uma coisa, quando a pessoa dece até o final ela traz o último registro do banco tudo certo, ai ela fica mostrando a mensagem de Carregando... mesmo não tendo mais nada a exibir, como poderia arrumar isso? outra coisa, ao subir o scroll esconder novamente os resultados do banco exibido com o scroll rolado para baixo

HTML

<div id="posts">                
</div>            
<h1 id="carregando">Carregando...</h1>

PHP

<? php

require "Db.php";

$db = new Db;

$ipp = 10;

$pagina = (isset($_GET['pagina'])) ? (int) $_GET['pagina'] : 0;

$itens = $pagina * $ipp;

$ret = $db - > query(sprintf("SELECT codigo, titulo, texto, imagem FROM post LIMIT %d OFFSET %d", $ipp, $itens));

if ($ret - > num_rows > 0) {
  // retorna os dados para a tela no formato json

  $retorno = array();

  while ($post = $ret - > fetch_assoc()) {
    $retorno[] = $post;
  }

  response(array("erro" => false, "inicio" => $itens + 1, "fim" => $itens + $ret - > num_rows, "itensporpagina" => $ipp, "posts" => $retorno));

} else {
  // retorna erro = true no formato json para a tela
  response(array("erro" => true));
}

// retorna dados no formato json para a tela do sistema
function response($response) {
  header("Content-Type: application/json");
  echo json_encode($response);
}

jquery

var pagina = 0;

function loadPosts() {
  $("#carregando").show();

  $.ajax({
    url: "dados.php?pagina=" + pagina,
    dataType: "json"
  }).done(function(data) {
    $("#carregando").hide();

    if (data.erro) return;

    var divposts = $("#posts");

    $.each(data.posts, function(key, val) {
      divposts.append("<div style='display:table; width:100%'><img src='" + val.imagem + "' align='left' style='margin-right:10px; margin-bottom:10px;' /><h2>" + val.titulo + " / " + val.codigo + "</h2><p>" + val.texto + "</p></div>");
    });

    pagina++;

  });

}

$(function() {
  $("#carregando").hide();

  loadPosts();

  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      // carrega os posts   
      loadPosts();
    }
  });

});
1
  • Conseguiu resolver?
    – Meu ovo
    6/07/2018 às 16:44

2 Respostas 2

1

Retire o segundo $("#carregando").hide(); (dentro do $(function() {) que não precisa.

O $("#carregando").show(); você altera para $("#carregando").stop().show();. O .stop() evita atropelamentos no método.

E após o $.each coloque $("#carregando").delay(1000).hide(0);. Isso irá dar um pequeno delay de 1 segundo para o carregando... sumir (você pode diminuir ou aumentar o tempo se quiser).

O script para remover os elementos que saírem da tela:

$(function(){

   loadPosts();

   $(window).scroll(function() {
      if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        loadPosts();
      }

     $.each($("#posts div"), function(){
       var dist = $(this).offset().top-$(window).scrollTop(); // verifica a distância do elemento ao topo
       // remove todos os elementos fora da tela
       if(dist > $(window).height()) $(this).remove();
    });

   });
});

Exemplo ilustrativo sem Ajax:

function loadPosts(){
   $("#carregando").stop().show();
   $("#posts").append('<div>div 2</div>');
   $("#carregando").delay(1000).hide(0);

}

$(function(){
   
   loadPosts();

   $(window).scroll(function() {
      if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        loadPosts();
      }
    
     $.each($("#posts div"), function(){
       var dist = $(this).offset().top-$(window).scrollTop();
       if(dist > $(window).height()) $(this).remove();
    });
   
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carregando" style="position: fixed; right: 0; background: red; display: none;">carregango..</div>
<div id="posts">
   <div>div 0</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
   <div>div 1</div>
</div>

2
  • pra dispositivo não funciona, sera que uma solução seria colocar um botao de carregar mais ?
    – goio
    8/07/2018 às 14:07
  • Seria uma solução tb.
    – Meu ovo
    8/07/2018 às 15:57
1

Dentro da sua função loadPosts, verifique se houve mais de '0' dados na resposta:

function loadPosts() {
  $("#carregando").show();

  $.ajax({
    url: "dados.php?pagina=" + pagina,
    dataType: "json"
  }).done(function(data) {
    $("#carregando").hide();

    if (data.erro) return;

    var divposts = $("#posts");
    if(data.posts.length > 0){
          $.each(data.posts, function(key, val) {
          divposts.append("<div style='display:table; width:100%'><img src='" + val.imagem + "' align='left' style='margin-right:10px; margin-bottom:10px;' /><h2>" + val.titulo + " / " + val.codigo + "</h2><p>" + val.texto + "</p></div>");
        });

        pagina++;
    }else{
        $("#carregando").hide();
    }

  });

}

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 .