Carregamento tardio com IntersectionObserver

O carregamento nativo sob demanda abrange <img> e <iframe>. Para qualquer outra coisa — imagens de fundo, vídeo, componentes dispendiosos e widgets de terceiros — IntersectionObserver é a ferramenta certa para adiar o trabalho até que o elemento esteja próximo da área visível.

Marque os elementos adiados com um atributo que contenha a origem real; renderize um marcador minúsculo. Observe cada um; na interseção, substitua a origem adiada pela origem real (ou ative o elemento de outra maneira) e deixe de observá-lo para que a função de retorno nunca seja executada novamente.

A propriedade de imagem de fundo do CSS não pode ser carregada sob demanda nativamente. Na interseção, defina el.style.backgroundImage = `url("${el.dataset.bg}")` ou adicione uma classe CSS que defina a imagem de fundo. A imagem começa a ser baixada nesse momento.

Para vídeos abaixo da dobra, omita inicialmente a origem e os elementos de origem. Na interseção, injete as tags <source> e chame video.load(). Sem isso, os metadados do vídeo podem ser baixados imediatamente, mesmo antes de o usuário rolar para perto do elemento.

Incorporações de redes sociais, widgets de comentários e scripts de bate-papo podem carregar megabytes. Na interseção, importe dinamicamente o script de configuração do componente: await import("/embed.js"). O custo só é pago quando o usuário realmente rola até a seção.

O carregamento nativo sob demanda de iframes ainda baixa o documento do iframe. Para incorporações pesadas, como mapas e reprodutores de vídeo, use o padrão de "fachada": exiba uma imagem substituta; ao clicar ou quando houver interseção, substitua-a pelo iframe real. Isso reduz drasticamente o peso inicial da página.

rootMargin: "200px" começa a carregar 200 pixels antes de o elemento entrar na área visível. Ajuste esse valor com base na velocidade de rolagem: se for pequeno demais, os usuários verão marcadores durante rolagens rápidas; se for grande demais, você anulará o objetivo do carregamento sob demanda ao carregar tudo.

Sempre execute observer.unobserve(element) depois que o carregamento sob demanda for ativado. Caso contrário, a função de retorno continuará sendo executada sempre que o elemento voltar à área visível — isso desperdiça CPU e pode causar erros se a ativação não for idempotente.

Defina a largura e a altura das imagens carregadas sob demanda e uma altura mínima nos contêineres correspondentes. Sem dimensões explícitas, a página é reorganizada à medida que o conteúdo é carregado — isso causa saltos incômodos durante a rolagem e uma pontuação ruim de Deslocamento cumulativo de layout.

Para obter um Aprimoramento progressivo completo, envolva o elemento carregado sob demanda em <noscript> com a origem real: <noscript><img src="/photo.jpg"></noscript>. Usuários sem JS recebem a imagem imediatamente; usuários com JS recebem a versão carregada sob demanda. Combine isso com uma marcação apropriada de origem de dados.

Uma única instância de observador pode monitorar centenas de elementos com eficiência. Não crie um observador por elemento. Crie um observador compartilhado com as opções desejadas e use observe() para registrar cada alvo.

Para <img> especificamente, use loading="lazy" como mecanismo principal e reserve IntersectionObserver para os casos que o carregamento nativo sob demanda não abrange. Os dois mecanismos se combinam bem: o carregamento nativo cuida das imagens abaixo da dobra; IntersectionObserver cuida de imagens de fundo, componentes e outros carregadores personalizados.

Por que é importante chamar observer.unobserve(element) depois que um elemento carregado sob demanda tiver sido ativado?

IntersectionObserver amplia o carregamento sob demanda para além de <img loading="lazy"> nativo, abrangendo imagens de fundo, vídeo, widgets de terceiros e importações dinâmicas de componentes. Use marcadores com a origem adiada, substitua-a na interseção e deixe de observar após a ativação. Pré-carregue com rootMargin, reserve espaço com largura e altura, forneça uma alternativa noscript e combine com o carregamento nativo sob demanda quando aplicável.