arrange automatic paging

Question

this paging is working perfectly, there is only one thing, when the person dies until the end it brings the last record of the bank everything right, then it keeps showing the message of Carregando... Even though you had nothing else to show for it, how could you fix it? something else, while scrolling up hide again the bank results displayed with scroll scrolled down

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();
    }
  });

});

Answer 1

Inside your loadPosts function, check if there were more than '0' data in the reply:

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();
    }

  });

}

Answer 2

Take out the second $("#carregando").hide(); (within the $(function() {) who doesn’t need.

The $("#carregando").show(); you change to $("#carregando").stop().show();. The .stop() avoids run-over in the method.

And after the $.each place $("#carregando").delay(1000).hide(0);. This will give a small delay of 1 second to the carregando... disappear (you can decrease or increase the time if you want).

The script to remove elements leaving the screen:

$(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();
    });

   });
});

Illustrative example without 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>