Série da semana: Autenticação em Aplicações Web 

Veja mais

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 ... Ver mais 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.

Precisa saber mais sobre esse tema antes de iniciar o curso?
Consulte os Guias abaixo:

Assine e tenha acesso completo Carga Horária No Certificado - 6H

Curso de Lazy Load

Aula 1 - free

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.
free
Aula 2 - free

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.
free
Aula 3 - free

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.
free
Aula 4 - free

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.
free
Aula 5 - free

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.
free
Aula 6 - free

Suavizando a transição com CSS3

Criaremos um efeito de transição mais suave para o carregamento das imagens utilizando CSS3.
free
Código Fonte - free

Código fonte

Nesse post você encontrará o código fonte completo da roda de código Lazy Load: Carregue páginas rapidamente
free
Conteúdo Extra - mvp

jQuery Scroll: Como saber se o usuário rolou a página até o fim

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

Autor do curso

Certificado Devmedia

Todos os nossos cursos oferecem certificado com carga horária. Eles são aceitos em todas as faculdades e orgãos públicos do Brasil. Assim que finalizar um curso já emita o seu.

Suporte ao aluno em tempo real

Todos os cursos possuem professores online para ajudar em qualquer dúvida que for necessária para o completo entendimento do curso.

Avaliação do curso

Acesse todos os nossos cursos sendo um assinante mvp

Benefícios MVP
  • Guias de Carreira
  • Suporte em tempo real
  • Assista o conteúdo offline
  • Emissão de certificado
  • #JOBS - Diversas vagas de emprego
  • Web-currículo
SEJA MVP
R$ 69,90 /mês *Tempo mínimo de assinatura: 12 meses.
Assine agora e tenha acesso ao curso
15 anos de treinamento online
700 mil cadastros
200 mil fãs no facebook
100 mil certificados emitidos