Curso
Lazy Load: Carregue páginas rapidamente
Neste curso aprenderemos a aplicar a técnica de Lazy Load em páginas web com jQuery e CSS, carregando as imagens apenas quando elas forem necessárias e otimizando assim o tempo de carregamento da página. Uma página web moderna pode conter diversas imagens para enriquecer a experiência do usuário, mas a utilização de imagens requer cuidado, pois isso pode comprometer essa experiência deixando o carregamento da página cada vez mais lento. Durante o processo normal de carregamento, onde todo conteúdo da página é carregado de forma assíncrona, há um consumo de banda desnecessário, porque nesse primeiro momento nem todo o conteúdo da página está visível para o usuário até que ele comece a interagir com o scroll.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
6 horas
Curso de Lazy Load (6 aulas)
Aula 1 - Introdução ao Lazy Load
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.
Aula 2 - Entendendo o Evento Scroll
Como um primeiro passo para a criação do comportamento de Lazy Load, veremos como criar um listener para o evento de scroll.
Aula 3 - Usando data e src para carregar imagens
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.
Aula 4 - Determinando se uma imagem está visível
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.
Aula 5 - Adicionando Lazy Load a uma página
Aplicaremos o efeito de Lazy Load em uma página com conteúdo textual e diversos elementos imagem em posições diferentes do documento.
Aula 6 - Suavizando a transição com CSS3
Criaremos um efeito de transição mais suave para o carregamento das imagens utilizando CSS3.
Veja outros cursos de JavaScript
JavaScript: Input
JavaScript: Aplicação em camadas
JavaScript: Objeto Literal e coleção de objetos