Como Carregar Conteúdo Sob Demanda Usando JQuery

Como carregar contedo sob demanda usando jQuery30 de dezembro de 2011porYuri MalheirosSites como o Facebook e o Orkut usam um efeito muito interessante de carregamento de contedo de acordo com a posio da barra de rolagem.O site carrega apenas uma parte dos dados e, medida que o usurio vai descendo a barra de rolagem, o site se encarrega de pegar mais dados no servidor para exibir.O efeito no complicado de fazer, alm de ser muito til, pois o servidor no precisar carregar todos os dados de uma s vez.Para fazer isso, utilizaremos o JQuery.Vamos utilizar o cdigo HTML abaixo, os estilos foram colocados direto no cdigo apenas para fins didticos, no faam isso.

yLog Scroll Tutorial

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

item 9

item 10

Ao abrir esse HTML no navegador, aparecer uma lista de itens com uma barra de rolagem.O que queremos que, ao rolar a barra at o fim, novos itens apaream.Para carregar contedo dessa forma, usa-se AJAX, nada muito complicado, mas a maior dvida como saber se a barra chegou ao final.Primeiro importe o JQuery, adicione a linha abaixo entre as tags . uma boa prtica import-lo direto do Google. Existe um evento chamado scroll, nome mais bvio impossvel.Vamos us-lo para fazer algo quando a barra for rolada.Adicione esse cdigo logo abaixo da linha que importa o JQuery. $(document). ready(function() { $("#content"). scroll(function() { //fazer algo aqui }); });.Com os mtodos scrollTop() e height(), possvel saber o quanto foi rolado e a altura da div, mas essa no a altura total, ela a altura apenas do que est sendo exibido.Para saber o tamanho total da div, necessrio usar a propriedade .scrollHeight.Com esses trs valores, possvel fazer o clculo para saber se a rolagem chegou ao fim.O quanto foi rolado, somado altura de exibio da div, ser igual ao tamanho total da div quando a barra de rolagem chegar ao final.No cdigo, isso seria:$(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight..Atualizando nosso script: $(document). ready(function() { $("#content"). scroll(function() { if ($(this). scrollTop() + $(this). height() == $(this). get(0). scrollHeight) { // a rolagem chegou ao fim, fazer algo aqui. } }); });.Dentro do if voc s precisa usar AJAX para pegar os dados do servidor. Ficaria algo mais ou menos assim: $(document). ready(function() { $("#content"). scroll(function() { if ($(this). scrollTop() + $(this). height() == $(this). get(0). scrollHeight) { $. ajax({ type: "post", url: "/maisitems/", success: function(data) { //manipula os dados $("#content ul"). append("" + item + ""); }, error: function() { } }); } }); });.O cdigo completo do HTML + Javascript fica assim: yLog Scroll Tutorial $(document).ready(function() { $("#content").scroll(function() { if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) { console.log("fim"); $("#content ul").append("item x");

$.ajax({ type: "post", url: "/maisitems/", success: function(data) { //manipula os dados $("#content ul").append("" + item + ""); }, error: function() { } }); } }); });