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.

Iniciar agora
Ebook exclusivo
Dê um upgrade no início da sua jornada. Crie sua conta grátis e baixe o e-book

Veja outros cursos de JavaScript

JavaScript: Input

JavaScript: Aplicação em camadas

JavaScript: Objeto Literal e coleção de objetos