Lazy Load: Carregue páginas rapidamente

Veremos o que é a técnica de Lazy Load e como ela pode ser aplicada para dar mais velocidade ao carregamento da página, permitindo disparar requisições para os elementos do tipo imagem apenas quando estas estiverem visíveis na página.

Como um primeiro passo para a criação do comportamento de Lazy Load, veremos como criar um listener para o evento de scroll.

Veremos como carregar uma imagem quando o evento de scroll for disparado, movendo a sua URL de um atributo data-url para o atributo src do elemento imagem.

Veremos como determinar se o elemento imagem está visível ou não para o usuário que está navegando pelo documento através do navegador. Uma vez que estiver visível, usaremos a técnica introduzida na aula anterior para carregar a imagem.

Aplicaremos o efeito de Lazy Load em uma página com conteúdo textual e diversos elementos imagem em posições diferentes do documento.

Criaremos um efeito de transição mais suave para o carregamento das imagens utilizando CSS3.

Nesse post você encontrará o código fonte completo da roda de código Lazy Load: Carregue páginas rapidamente

Aprenda a detectar o movimento da barra de rolagem usando jQuery para identificar quando o usuário chegou ao final da página.