0

Fala pessoal... Estou desenvolvendo um aplicação onde obtenho os dados via JSON e modelo eles via javascript, até aqui tudo certo...

Preciso de uma ajuda para criar um infinite scroll em javascript, mostrando 10 resultado e ao chegar no final da página ele carrega mais 10, até terminar os dados.

Qual seria a melhor forma de fazer isto?

Abaixo segue meu código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Xtart</title>
	<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var url="http://xt.art.br/br.art.xt.xtart/API/";
			$("#news").html("");
			$.getJSON(url,function(data){
				$.each(data.members, function(i,user){
					var tblRow =
						"<div class='posts' style='background-image: url("+user.guid+");'>"
						+"<input type='hidden' value='"+user.ID+"'/>"
                        +"<div class='post_title'><div>"+user.post_title+"</div></div>"
						+"</div>";
					$(tblRow).appendTo("#news");
				});
			});
		});
	</script>
	<style type="text/css">
		#news{ float: left; width: 100%;}
		.posts{float: left; width: 100%; height: 200px; margin-bottom: 10px; background-position: center; background-size: cover;}
		.post_title{margin-top:120px; height: 80px; background-image:url(bg_post_title.png); background-repeat: repeat;}
		.post_title div{color: #FFFFFF !important; padding: 2px; text-transform: uppercase; text-shadow: 1px 1px #444}
	</style>
</head>

<body>
	<div id="news"></div>
</body>
</html>

2 Respostas 2

1

Normalmente essa técnica é usada quando não se tem todos elementos já carregados e assim vai carregando aos poucos para diminuir o tempo inicial de carregamento, mas no seu caso você já tem todos os dados carregados, se mesmo assim quiser usá-la pode fazer algo desse tipo:

/* Executar depois que os elementos da página estiverem carregados, ou seja, seu código anterior já deve ter populado o '#news'. */
var mostrados = 10; //valor inicial
var filhos = $('#news').children();
for (var i=0; i<filhos.length; i++) {
    if (i < mostrados) filhos[i].show();
    else filhos[i].hide();
}

$(window).scroll(function() { //evento de scroll na janela
    if($(window).scrollTop() == $(document).height() - $(window).height()) { //atingido o final da página
        mostrados += 10;
        var filhos = $('#news').children();
        for (var i=0; i<mostrados; i++)
            filhos[i].show();
    }
}

Obs: Você pode remover o primeiro loop se no seu código anterior adicionar style:"display:none" em todos seus divs que são inseridos ao #news exceto os 10 primeiros.

1
  • Valeu @LucasMarques me ajudou muito! 27/03/2017 às 21:14
1

Consegui resolver o meu problema com a ajuda do @LucasMarques.

Abaixo deixo meu código funcionando, caso alguém tenha o mesmo problema que eu tive.

Valeu!

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Xtart</title>
  <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      "use strict";
      var url = "http://xt.art.br/br.art.xt.xtart/API/";
      $("#news").html("");
      var mostrados = 5;
      $.getJSON(url, function(data) {
        $.each(data.members, function(i, user) {
          var tblRow = "<div class='posts' style='background-image: url(" + user.guid + "?zoom=2&resize=640%2C360);'>" + "<input type='hidden' value='" + user.ID + "'/>" + "<div class='post_title'><div>" + user.post_title + "</div></div>" + "</div>";
          $(tblRow).hide().appendTo("#news");
        }).done(function {
          var filhos = $('#news').children('.posts');
          for (var i = 0; i < mostrados; i++) {
            filhos[i].className = "posts show";
          }
          $(window).scroll(function() {
            if ($(this).scrollTop() + $(this).height() === $(document).height()) {
              var mostradosAntes = mostrados;
              mostrados += 5;
              var filhos = $('#news').children('.posts');
              for (var i = mostradosAntes; i < mostrados; i++) {
                filhos[i].className = "posts show";
              }
            }
          });
        });
      });
    });
  </script>
  <style type="text/css">
    #news {
      float: left;
      width: 100%;
    }
    
    .posts {
      float: left;
      width: 100%;
      height: 200px;
      margin-bottom: 10px;
      background-position: center;
      background-size: cover;
    }
    
    .post_title {
      margin-top: 120px;
      height: 80px;
      background-image: url(bg_post_title.png);
      background-repeat: repeat;
    }
    
    .post_title div {
      color: #FFFFFF !important;
      padding: 2px;
      text-transform: uppercase;
      text-shadow: 1px 1px #444
    }
    
    .show {
      display: block;
    }
    
    .hide {
      display: none;
    }
  </style>
</head>

<body>
  <div id="news"></div>
</body>

</html>

0

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 .