Infinite Scroll with JSON + Javascript data

Question

Infinite Scroll with JSON + Javascript data

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I am developing an application where I get the data via JSON and model them via javascript,

I need a help to create an infinite scroll in javascript, showing 10 result and when it arrives at the bottom of the page it loads 10 more, until the data is finished.

What would be the best way to do this?

Below is my code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Xtart</title>
	<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script><scripttype="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>

javascript jquery json rolamento

asked by anonymous 24.03.2017 / 22:22

2 answers

1

I was able to solve my problem with the help of @LucasMarques.

Below I leave my code working, if someone has the same problem I had.

Thanks!

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Xtart</title>
  <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script><scripttype="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>

27.03.2017 / 23:20

ASP.NET C # DropDownList doubt Doubt verb GET WebApi

score 1 · Accepted Answer

Normally this technique is used when you do not have all elements already loaded and so it will gradually load to decrease the initial loading time, but in your case you already have all the data loaded, if you want to use it anyway do something like this:

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

Note: You can remove the first loop if in your previous code you add style:"display:none" to all your divs that are inserted into #news except the first 10.