Infinite Scrolling

taka_kura · Novembro 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 · Novembro 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

Editado Novembro 9, 2012 por Romerito

Entrar

Infinite Scrolling

Pergunta

taka_kura

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Romerito

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades