Carregamento lento usando a API Intersection Observer

Carregamento lento é uma técnica que nos permite atrasar o carregamento de conteúdo não essencial em nosso aplicativo até depois do carregamento inicial da página. Carregando apenas o conteúdo mais essencial no início e carregando o conteúdo restante quando necessário para o usuário, podemos reduzir o tamanho do pacote de nosso aplicativo, economizando segundos valiosos quando um usuário implanta nosso aplicativo pela primeira vez.

Existem muitas maneiras diferentes de adicionar carregamento lento em aplicativos modernos, mas uma das mais usadas é a rolagem infinita. O conteúdo da página já foi renderizado e mais conteúdo é carregado conforme o usuário rola a página para baixo.

Também podemos utilizar o carregamento lento por meio de uma técnica chamada divisão de código . Freqüentemente usado em aplicativos React, ele nos ajuda a reduzir o tamanho do nosso pacote, dividindo o código do nosso aplicativo em partes carregadas lentamente.

Neste tutorial, aplicaremos a técnica de carregamento lento em nossos aplicativos JavaScript vanilla usando o API Intersection Observer .

Usando a API Intersection Observer

Conforme a web evoluiu ao longo dos anos, os navegadores ganharam mais suporte, recursos e APIs mais recentes. Algo que costumava ser um problema para os desenvolvedores da web era a criação de qualquer tipo de funcionalidade dependente da visibilidade da posição de um elemento específico do DOM.

Anteriormente, os navegadores não tinham nenhuma API para verificar a visibilidade de um elemento e tínhamos que contar com soluções como JavaScript e jQuery. Foi muito difícil implementar uma solução para este problema. Os navegadores modernos estão facilitando nossas vidas com a implementação de novas APIs que são atualizadas diariamente. A API Intersection Observer é uma delas.

A API Intersection Observer fornece uma maneira de observar as mudanças na interseção de um elemento específico. Podemos usar essa API para verificar a visibilidade de elementos específicos em nossos aplicativos sem ter que criar códigos confusos e funcionalidades de contornar.

A API Intersection Observer pode ser usada de várias maneiras:

• Imagens de carregamento lento ou outro conteúdo quando a página é rolada
• Implementando rolagem infinita
• Verificando a visibilidade do elemento para anúncios para calcular as receitas
• Diz ao navegador para executar o código apenas quando o elemento estiver visível na janela de visualização

Agora, usaremos a interface IntersectionObserver para criar um novo observador e acompanhar as mudanças na interseção de um elemento de destino:

 let observer=new IntersectionObserver (callback, opções);

O primeiro argumento do IntersectionObserver é uma função de retorno de chamada que é chamada quando nosso elemento de destino cruza nossa janela de visualização do dispositivo ou um elemento específico. O segundo argumento é um objeto que chamamos de options . Este objeto é responsável por controlar as circunstâncias de como seu retorno de chamada é invocado e possui os seguintes campos:

• root : o elemento que foi definido como a janela de visualização para verificar a visibilidade do alvo. Este elemento deve ser um ancestral do elemento target
• rootMargin : a margem definida em torno do elemento root . Este elemento pode receber valores CSS, como pixels ou porcentagens
• thresold : um número ou uma matriz de números que indica que porcentagem da visibilidade do alvo a função de retorno de chamada do observador deve invocar

Vamos criar nosso primeiro observador usando a API Intersection Observer.

Teremos um objeto chamado options onde passaremos as opções para nosso observador. Em seguida, criaremos nosso primeiro observador criando um novo IntersectionObserver e passando uma função de retorno de chamada:

 opções const={ root: document.querySelector (". container"), rootMargin:"10px", limite: 0,5
};
const myFirstObserver=new IntersectionObserver ((elementos)=> { elements.forEach ((element)=> console.log ("element", element));
}, opções);

Agora, precisamos obter nosso elemento de destino, que observaremos:

 const target=document.querySelector (". header");

Depois disso, usamos o método observe para observar as mudanças na interseção de um elemento de destino:

 observador.observe (alvo);

Esta é a aparência do nosso código final:

 opções const={ root: document.querySelector (". container"), rootMargin:"10px", limite: 0,5
};
const observer=new IntersectionObserver ((elementos)=> { elements.forEach ((element)=> console.log ("element", element));
}, opções);
const target=document.querySelector (". header");
observer.observe (target);

Há algumas coisas que precisamos lembrar ao usar a API Intersection Observer:

• Quando o destino atinge um limite, a função de retorno de chamada é invocada e recebe uma lista de objetos IntersectionObserverEntry
• No segundo argumento da interface IntersectionObserver , se você não definir o elemento raiz, ele assumirá como padrão a janela de visualização do navegador ou null
• O elemento de destino deve estar dentro da árvore DOM do elemento raiz
• As interfaces IntersectionObserver não permitem que você observe mais de um elemento por vez. Para observar vários, você terá que iterar e observá-los um por um

Casos de uso de aplicativos do mundo real

A maneira como você usa a API Intersection Observer pode variar dependendo da tecnologia que você está usando em seu aplicativo. Se você estiver usando o JavaScript vanilla, pode facilmente usar a própria API do navegador. Se você estiver usando alguma estrutura JavaScript, existem algumas bibliotecas que podem ajudá-lo a usar o API Intersection Observer.

Vamos criar um exemplo usando a API Intersection Observer com React porque é uma biblioteca de UI JavaScript popular e frequentemente usada. No entanto, você pode usar facilmente a API Intersection Observer com qualquer estrutura ou biblioteca que desejar.

Vamos criar um novo projeto Create React App usando o seguinte comando:

 npx criar-reagir-app intersecção-observador-na-prática

Vamos escrever todo o código dentro de nosso componente App . Primeiro, precisamos estilizar nosso aplicativo um pouco usando CSS, começando com nossa seção e nosso elemento de destino. Dentro do elemento de destino, quando o elemento estiver visível, adicionaremos a classe .isVisible .

Dentro do arquivo styles.css padrão, cole o seguinte código:

.root { display: flex; direção flexível: coluna; alinhar-itens: centro; justificar-conteúdo: centro; cor de fundo: #fff;
} .seção { altura: 100vh; largura: 100%;
} .alvo { display: flex; justificar-conteúdo: centro; alinhar-itens: centro; plano de fundo: # 151419; cor: #fff; peso da fonte: 900; tamanho da fonte: 20px; largura: 300px; altura: 200px; raio da borda: 5px;
} .é visível { display: flex; justificar-conteúdo: centro; alinhar-itens: centro; posição: fixa; topo: 0; largura: 100%; plano de fundo: # 151419; cor: #fff; tamanho da fonte: 20px; peso da fonte: 900; preenchimento: 40px;
}

Criaremos um exemplo simples usando a API Intersection Observer que altera o conteúdo dentro de nosso componente de cabeçalho quando nosso elemento de destino se torna visível para nós.

Dentro de nosso componente App , vamos criar alguns elementos HTML:

 
 
 {é visível ?"✅ Visível":"❌ Não visível"} 
 
 
 
 elemento alvo 

Agora, vamos criar um ref chamado rootRef , que passamos para o nosso elemento de destino. Depois disso, vamos criar um estado chamado isVisible para verificar se o elemento de destino está visível em nossa página:

 const rootRef=useRef (null);
const [isVisible, setIsVisible]=useState (false);

A seguir, usaremos o gancho useEffect para criar nosso observador. Dentro do gancho, criaremos nosso objeto options :

 opções const={ root: null, rootMargin:"0px", limite: 1,0
};

Lembre-se de que quando nossa função de retorno de chamada é invocada, ela recebe uma lista de objetos IntersectionObserverEntry . Esses objetos têm muitas propriedades, e uma delas é chamada de isIntersecting . A propriedade isIntersecting é um valor booleano que é verdadeiro se o elemento de destino está se cruzando com o elemento raiz do observador.

Agora vamos criar nosso observador. Para nossa função de retorno de chamada, vamos obter o valor da propriedade isIntersecting e definir o estado isVisible :

 const observer=new IntersectionObserver ((entradas: qualquer)=> { const [entrada]=entradas; setIsVisible (entry.isIntersecting);
}, opções);

Agora, vamos usar a função observar e o método unobserve para fazer a limpeza:

 if (targetRef.current) observer.observe (targetRef.current);
return ()=> { if (targetRef.current) observer.unobserve (targetRef.current);
};

Tudo o que precisamos fazer é passar nosso targetRef como uma dependência para nosso gancho useEffect , e temos um exemplo completo da API Intersection Observer funcionando perfeitamente. Você pode notar que o conteúdo muda quando o elemento de destino fica visível na página.

Caso você não queira usar a API do navegador e queira trabalhar com uma biblioteca para acelerar o desenvolvimento, existe uma biblioteca muito boa chamada react-intersection-observer .

Para usar esta biblioteca, você precisa importar o gancho useInView e passar um objeto options como argumento:

 opções const={ root: null, rootMargin:"0px", limite: 1,0
};
const {ref, inView, entrada}=useInView (opções);

Finalmente, tudo que você precisa fazer é atribuir a ref ao elemento DOM que você deseja observar, e o gancho relatará o status:

 import React from'react';
import {useInView} de'react-intersection-observer';
componente const=()=> { opções const={ root: null, rootMargin:"0px", limite: 1,0 }; const {ref, inView, entrada}=useInView (opções); Retorna ( 
 
 {`Cabeçalho dentro da janela de visualização $ {inView}.`} 
 
 );
};

Conclusão

Existem infinitas possibilidades usando a API Intersection Observer. Com algumas linhas extras de código, você pode melhorar muito a experiência do usuário em seu aplicativo, reduzindo o tempo de carregamento. Você pode carregar imagens lentamente, implementar a pré-busca de links quando eles estiverem visíveis na página e muito mais.

O suporte para a API do Intersection Observer é forte. No momento em que este artigo foi escrito, a maioria dos navegadores modernos o suportava. Vale a pena levar em consideração essa API para ajudar a observar as mudanças em nossas páginas da web.

A postagem Carregamento lento usando a API Intersection Observer apareceu primeiro no LogRocket Blog .

Source link