loadImageScroll

carrega imagens conforme o scroll do mouse

by ravelino

HTML

<p>Teste para carregar imagens quando a barra de rolagem chegar ao fim</p>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>

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);
}
}
});
});