<p><img src="https://safebooru.org//samples/4460/sample_2d86143e93b6368902f88bb4ea80cd69a8f67906.jpg?4651402" alt=""></p>
<p>Lazy loading é uma técnica de otimização de desempenho usada para adiar o carregamento de recursos não essenciais, como imagens e conteúdo, até que sejam necessários. Isso pode ajudar a melhorar significativamente os tempos de carregamento da página e a experiência do usuário, especialmente em sites com muito conteúdo visual.</p>
<p>Sabe quem usa? Twitter, Instagram, Facebook utilizam do lazy loading para dar aquele sentimento de que o feeding ou imagem está carregando. Dessa maneira,
além de deixar o browser carregar as imagens por último, ele também te deixa com a sensação de que algo está acontecendo e ele está trabalhando, 
ao invés de simplesmente esperar aparecer tudo na sua tela de uma vez.</p>
<h2>Por que usar Lazy Loading?</h2>
<p>Ao adiar o carregamento de imagens e outros recursos até que sejam necessários, podemos reduzir a quantidade de dados que o navegador precisa baixar inicialmente. Isso é particularmente útil em sites com muitas imagens ou conteúdo abaixo da dobra, onde o usuário pode não rolar imediatamente para ver todo o conteúdo.</p>
<h2>Implementação com JavaScript Puro</h2>
<p>Em JavaScript puro, podemos implementar lazy loading de imagens monitorando a posição do elemento na janela de visualização (viewport) e carregando a imagem apenas quando ela estiver próxima o suficiente para ser visível.</p>
<pre><code class="language-javascript">document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
  const lazyImages = document.querySelectorAll(&quot;img.lazy&quot;);

  const lazyLoad = function() {
    lazyImages.forEach(image =&gt; {
      if (image.getBoundingClientRect().top &lt; window.innerHeight &amp;&amp; !image.src) {
        image.src = image.dataset.src;
      }
    });
  };

  document.addEventListener(&quot;scroll&quot;, lazyLoad);
  window.addEventListener(&quot;resize&quot;, lazyLoad);
  window.addEventListener(&quot;orientationchange&quot;, lazyLoad);

  lazyLoad();
});
</code></pre>
<h2>Implementação com Next.js</h2>
<p>Em aplicações Next.js, o lazy loading de imagens e conteúdo é suportado de forma nativa por meio do componente <code>Image</code> fornecido pela biblioteca <code>next/image</code>. Ele otimiza automaticamente o carregamento de imagens, fornecendo carregamento sob demanda, redimensionamento e otimização de formato de imagem.</p>
<pre><code class="language-javascript">import Image from &#39;next/image&#39;;

function MyComponent() {
  return (
    &lt;div&gt;
      {/* Imagem carregada sob demanda */}
      &lt;Image
        src=&quot;/path/to/image.jpg&quot;
        alt=&quot;Descrição da imagem&quot;
        width={400}
        height={300}
      /&gt;
    &lt;/div&gt;
  );
}

export default MyComponent;
</code></pre>
<h2>Conclusão</h2>
<p>Lazy loading de imagens e conteúdo é uma prática essencial para otimizar o desempenho das páginas da web, reduzindo o tempo de carregamento inicial e melhorando a experiência do usuário. Com JavaScript puro, podemos implementar lazy loading manualmente monitorando a posição dos elementos na viewport. Em frameworks modernos como Next.js, essa funcionalidade é fornecida nativamente, facilitando a implementação e melhorando ainda mais o desempenho da aplicação.</p>


O que é Lazy Loading e para que serve?