Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 13, 2023 11:22 am GMT

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:

Exemplo de seo de um site que destaca um texto com uma imagem de fundo

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.

Imagem que mostra como as imagens podem ser carregadas sob demanda com a utilizao da tcnica de lazy loading

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To