Curso
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
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.
JavaScript: Input
JavaScript: Aplicação em camadas
JavaScript: Objeto Literal e coleção de objetos