Infinite Scrolling

taka_kura · November 5, 2012

Olá,

Eu tenho uma página que deve mostrar várias imagens, porém não quero que mostre todas direto. Quero ir carregando 20 de cada vez atraves de infinite scrolling. Só que não sei como faze-lo!

Para mostrar as imagens eu tenho um vetor com as URLs de todas as imagens. Esse vetor tem 5000 URLs de imagens e o ideal seria que conforme eu vou descendo na pagina, o vetor vai sendo percorrido e as imagens mostradas no browser.

alguém tem alguma ideia para me ajudar?

Obrigado!

Romerito · November 9, 2012

i aew taka_kura, com o jquery da pra se fazer isso facilmente, vou colocar um exemplo:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">

$(function(){
	var contador = 0;
	var jsonImages = null;
	$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
		{
			tags: "mount rainier",
			tagmode: "any",
			format: "json"
		},function(data){
			jsonImages = data;
		});


	$(window).scroll(function () {
		var alturaDocumento = $(document).height();
		var alturaAtual = $(this).scrollTop() + $(window).height() + 1;

		if (alturaAtual >= alturaDocumento ){
			if ($(jsonImages.items).size() == contador){
				$("body").append("<p>não existem mais imagens para serem carregadas!</p>");
				$(window).unbind("scroll");
			} else {
				 var img = $("<img />").attr("src", jsonImages.items[contador++].media.m);
				 var titulo = $("<h3 />").text("Imagem " + contador);
				 $("body").append(titulo).append(img);
			}
		}
    });
});
</script>

</head>
<body>
Teste para carregar imagens quando a barra de rolagem chegar ao fim
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


</body>
</head>
</html>

espero que ajude abraço!

edit: testei apenas no firefox e chromium

Edited November 9, 2012 by Romerito

Sign In

Infinite Scrolling

Question

taka_kura

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Romerito

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity