Javascript: Preguiçoso carregar imagens no Horizontal Div?

Question

Eu tenho uma div que tem um monte de miniaturas mostrando horizontalmente (com uma barra de rolagem horizontal). Existe uma maneira de carregar preguiçoso essas miniaturas e só mostrar-lhes uma vez que o usuário horizontalmente rola para a sua posição? Todos os exemplos que eu vi verificar a janela do navegador, e não uma div.

Isto é para entradas da competição por isso às vezes existem centenas de entradas, o que afeta drasticamente o desempenho.

Agradecemos antecipadamente.

Answer 1

I bifurcada a href="http://plugins.jquery.com/project/lazyload" rel="nofollow carga preguiçoso plug-in para jQuery e adicionado suporte para lazy- carregar imagens em um recipiente div. O carga preguiçoso plug-in para jQuery agora suporta este diretamente. Não deve ser muito difícil para remover a dependência do jQuery ou adaptá-lo para outra biblioteca, se você precisa.

Você pode obter meu projeto bifurcada de github: http://github.com / silentmatt / jquery_lazyload / árvore / master .

Para usá-lo, chamada LazyLoad nas imagens exatamente como no original, exceto que você precisa adicionar uma opção "container" com a rolagem div elemento. Então, se a sua aparência HTML como este:

<div id="container" style="width: 765px; overflow: scroll;">
    <img src="image1.jpg" width="765" height="574">
    <img src="image2.jpg" width="765" height="574">
    <img src="image3.jpg" width="765" height="574">
    ...
</div>

você chamaria LazyLoad assim:

$("#container img").lazyload({ container: $("#container") });

Answer 2

Veja a minha pergunta onde eu encontrou um problema similar. Jason Bunting me deu um pequeno script útil para carregar as imagens em pedaços:.

Como exibir o status de carregamento com preloader e múltipla imagens?