An Interest In:
Web News this Week
- April 14, 2024
- April 13, 2024
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
- April 8, 2024
Lazy loading para imagens em background
Recentemente, estava desenvolvendo um projeto com meu parceiro Anderson Santana para um cliente da UpCubo.
Um dos requisitos deste projeto seria uma seo com um carrossel de 8 imagens sendo alternadas a cada 5 segundos em background com um texto em destaque desta maneira:
A primeira vista, essa pode ser uma tarefa simples, mas existem alguns detalhes importantes a serem observados em relao performance.
No mundo do desenvolvimento web, a performance uma preocupao constante para garantir uma boa experincia do usurio. Recentemente, o Google anunciou o Core Web Vitals, um conjunto de mtricas que avaliam a qualidade da experincia de um usurio ao acessar um site, e isso trouxe ainda mais importncia ao tema.
Como resolver?
Lembrando que essa apenas uma das muitas formas de implementar essa funcionalidade.
Durante minhas pesquisas, a maneira mais performtica de fazer essa implementao seria utilizando o IntersectionObserver do JavaScript. Dessa forma, poderamos disparar o incio do carregamento das imagens apenas quando a seo estivesse prestes a ficar visvel na tela do usurio.
Com isso, o carregamento inicial da pgina no seria prejudicado pelo tamanho dessas imagens.
O cdigo ficou assim:
const images = [ "/img/img-example-1.jpg", "/img/img-example-2.jpg", "/img/img-example-3.jpg", "/img/img-example-4.jpg", "/img/img-example-5.jpg", "/img/img-example-6.jpg", "/img/img-example-7.jpg", "/img/img-example-8.jpg",];const animationDuration = 5000; //milessecondslet intervalId;// aguarda a pgina carregar para executar a funo initLazyLoadBackgrounddocument.addEventListener("DOMContentLoaded", () => initLazyLoadBackground());// Funo que inicia o lazy load de imagens de fundofunction initLazyLoadBackground() { // Seleciona todos os elementos com a classe "lazy-background" const elementLazyBackground = document.querySelector(".lazy-background"); // Verifica se o IntersectionObserver est disponvel no navegador if ("IntersectionObserver" in window) { // Cria um novo IntersectionObserver e passa como callback a funo lazyLoadIntersectionObserver const lazyBackgroundObserver = new IntersectionObserver( lazyLoadIntersectionObserver ); // Observa o elemento com a classe "lazy-background" lazyBackgroundObserver.observe(elementLazyBackground); }}// Funo que executada quando um elemento com a classe "lazy-background" observadofunction lazyLoadIntersectionObserver(entries, observer) { entries.forEach((entry) => { if (entry.isIntersecting) { // Seleciona o elemento que ser utilizado como fundo const elementToChangeBgImage = document.querySelector(".lazy-background"); // ndice da imagem que ser exibida let backgroundImageIndex = 0; // Funo que altera o fundo do elemento selecionado a cada intervalo de tempo function changeBackgroundImage() { const newBackground = `url("${images[backgroundImageIndex]}")`; elementToChangeBgImage.style.backgroundImage = newBackground; // Incrementa o ndice da imagem e reinicia caso chegue ao final do array backgroundImageIndex++; if (backgroundImageIndex >= images.length) backgroundImageIndex = 0; } // Inicia a animao e armazena o id do intervalo em uma varivel intervalId = setInterval(changeBackgroundImage, animationDuration); // Remove o elemento observado do IntersectionObserver observer.unobserve(entry.target); } else if (intervalId) { // Encerra a animao caso o elemento deixe de ser observado clearInterval(intervalId); intervalId = null; } });}
Deste modo, a primeira imagem do carrossel ser carregada apenas (e se) o usurio fizer o scroll da pgina at chegar na seo.
Como essas imagens sero apenas para efeitos ilustrativos e no trazem nenhum tipo de contedo adicional para a informao, isso no afetar negativamente o SEO da pgina.
O tempo de carregamento de uma pgina um dos fatores mais importantes na experincia do usurio. Pginas que carregam lentamente podem afetar a satisfao do usurio e at mesmo influenciar no ranqueamento e por consequncia na taxa de converso de um site.
Vale lembrar que o desempenho de uma pgina depende de vrios outros fatores, e o uso de lazy loading para imagens de fundo pode ser apenas uma das estratgias para otimizao de performance. Outras tcnicas, como compresso de imagens, cache e otimizao de cdigo, tambm devem ser consideradas.
Imagens so essenciais para a web e vo sempre estar presentes, no entanto, podemos ser criativos para economizar valiosos kbps :)
Fique a vontade para me adicionar no Linkedin
Referncias:
https://web.dev/lazy-loading-images/
Original Link: https://dev.to/claytonrss/lazy-loading-para-imagens-em-background-297
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To