react cool img
v1.2.12
Este é um componente leve reagir <Img /> , que ajuda a lidar com a imagem UX (experiência do usuário) e otimização de desempenho como profissional?
Ele capacita a tag img padrão por muitos recursos interessantes sem quebrar sua experiência de desenvolvimento original. Idealmente, pode ser uma substituição de tag img para react.js.
⚡️ Demoção ao vivo: https://react-cool-img.netlify.app
❤️ it ️ no github ou tweet sobre isso.
Os espaços reservados por satisfazer vários estados de carregamento de imagem (por exemplo, imagem de carregamento> imagem real> imagem de erro).
Carregamento preguiçoso inteligente com uma maneira performente e eficiente, usando o observador de interseção.
Mecanismo interno de retragem automática. O usuário não perderá suas informações importantes.
Aborte todos os downloads de imagem atuais em componentes, sem montagem, economizando recursos de largura de banda e navegador.
Suporta a renderização / javascript do lado do servidor está desativado / SEO.
Suporta a definição do tipo de tipscript.
Tamanho minúsculo (~ 2kb Gzipped). Não há dependências externas, além do react e react-dom .
Fácil de usar.
️ A maioria dos navegadores modernos suporta o observador de interseção nativamente. Você também pode adicionar o Polyfill para suporte completo ao navegador.
react-cool-img é baseado em ganchos de reação. Requer react v16.8+ .
Este pacote é distribuído via NPM.
$ yarn add react-cool-img# ou $ npm install-save react-cool-img
Os adereços padrão do componente foram ajustados para fins de otimização de carregamento. Vamos iniciá -lo como o exemplo a seguir.
importar img de "react-cool-img"; // sugere usar a baixa qualidade ou vetor imagensImport carregingImage de "./images/loading.gif";import errorImage de" ./images/error.svg";Const App = ( ) => (
<Imgplaceholder = {carregingImage} src = "https: // the-image-url" error = {errorImage} alt = "reak cool iMg"
/>); Não quer um espaço reservado para imagem? Não se preocupe, você pode usar estilos ou CSs em linha. O componente é totalmente compatível com a experiência de desenvolvimento da tag img normal.
importar img de "react-cool-img"; const app = () => (
<Imgstyle = {{BackgroundColor: "Gray", Width: "480", Height: "320"}} src = "https: // the-image-url" alt = "reak cool img"
/>); O componente de imagem funciona semelhante à tag img padrão e com os seguintes adereços.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
src | corda | Fonte de imagem. É required .Formatos de suporte | |
srcSet | corda | Fontes de imagem para imagens responsivas. Somente para src Prop.Artigo de referência | |
sizes | corda | Tamanhos de imagem para imagens responsivas. Somente para src Prop.Artigo de referência | |
width | corda | Largura da imagem em px. | |
height | corda | Altura da imagem em px. | |
placeholder | corda | Fonte da imagem de espaço reservado. Formatos de suporte | |
error | corda | Erro Fonte da imagem. Ele substituirá a imagem do espaço reservado. Formatos de suporte | |
alt | corda | Um texto alternativo para uma seção de imagem. | |
decode | booleano | true | Use img.decode () para pré-decodificar a imagem antes de renderizá-la. Útil para impedir que o fio principal bloqueie a decodificação de imagem grande. |
lazy | booleano | true | Ligue/desliga o carregamento preguiçoso. Usando observador de interseção |
cache | booleano | true | Carregue instantaneamente imagens que foram armazenadas em cache quando possível para abortar o comportamento de carregamento preguiçoso. Artigo de referência |
debounce | número | 300 | Quanto esperar em milissegundos que a imagem deve estar na viewport antes de começar a carregar. Isso pode impedir que as imagens sejam baixadas enquanto o usuário rola rapidamente além delas. |
observerOptions | objeto | { root: window, rootMargin: '50px', threshold: 0.01 } | Consulte a seção de observação. |
retry | objeto | { count: 3, delay: 2, acc: '*' } | Veja a seção de nova tentativa. |
... | Encontre mais adereços e eventos. |
Todas as propriedades são optional .
root: Element | null - O elemento usado como viewport para verificar a visibilidade do alvo. Deve ser o ancestral do alvo. Padrões no navegador Viewport se não for especificado ou se null .
rootMargin: string - Margem ao redor da raiz. Pode ter valores semelhantes à propriedade da margem CSS, por exemplo, "10px 20px 30px 40px" (superior, direita, inferior, esquerda). Os valores podem ser porcentagens. Esse conjunto de valores serve para crescer ou encolher cada lado da caixa delimitadora do elemento raiz antes de calcular as interseções.
threshold: number - Um único número entre 0 e 1, que indica em que porcentagem da visibilidade do alvo o retorno de chamada do observador deve ser executado. Um valor de 0 significa assim que até um pixel estiver visível, o retorno de chamada será executado. 1 significa que o limiar não é considerado passado até que cada pixel esteja visível.
Todas as propriedades são optional .
count: number - Especifica o número de vezes que você deseja novamente. Defina-o como 0 desativará a retrometição automática.
delay: number - Especifica o atraso entre as tentativas em segundos.
acc: string | false - Especifica como o atraso deve ser acumulado com cada tentativa. Ele aceita os seguintes valores:
'*' (default) - Multiplique o atraso após cada tentativa subsequente pelo valor de delay fornecido, por delay: 2 significa que a repetição será executada após 2 segundos, 4 segundos, 8 segundos e assim por diante.
'+' - o atraso de incremento após cada tentativa pelo valor delay fornecido, por exemplo delay: 2 significa que a repetição será executada após 2 segundos, 4 segundos, 6 segundos e assim por diante.
false - Mantenha o atraso constante entre as tentativas, por exemplo, delay: 2 significa que a repetição será executada a cada 2 segundos.
O carregamento de imagem preguiçoso através da API de interseção do observador é bom. Mas poderia ser maior baixar uma imagem apenas quando o usuário quiser vê -la? Ou ignorar o carregamento preguiçoso para imagens em cache? A resposta é sim e esses recursos já são incorporados a react-cool-img pelos adereços debounce e cache .
Pelo Prop debounce , uma imagem pode esperar para ser baixada enquanto estiver na Viewport por um tempo definido. Nos casos em que você tem uma longa lista de imagens pelas quais o usuário pode rolar inadvertidamente. Nesse momento, o carregamento de imagens pode causar desperdício desnecessário de largura de banda e tempo de processamento.
importar img de "react-cool-img"; importar defaultImg de "./images/default.svg";Const App = () => (
<Imgplaceholder = {defaultImg} src = "https: // the-image-url" debounce = {1000} // padrão é 300 (ms) alt = "react cool iMg"
/>); No suporte cache , as imagens que você já armazenaram em cache abortarão o carregamento preguiçoso até que o usuário visite seu aplicativo na próxima vez. O carregamento preguiçoso é configurado para as imagens restantes que não foram armazenadas em cache. Isso é útil para o UX, porque não há muito trabalho extra para carregar imagens em cache imediatamente e é uma vitória fácil para tornar a interface do usuário mais intuitiva.
importar img de "react-cool-img"; importar defaultImg de "./images/default.svg";Const App = () => (
<Imgplaceholder = {defaultImg} src = "https: // the-image-url" cache // padrão é verdadeiro, apenas para Demoalt = "React Cool Img"
/>); Existem dois desafios ao fazer um carregamento de imagem preguiçoso com a renderização do lado do servidor. Um é a disponibilidade de JavaScript que o outro é SEO. Felizmente, podemos usar a tag <noscript> para resolver esses problemas. Ele renderizará a imagem real como fallback se o JavaScript estiver desativado, portanto, o usuário não verá a imagem que ficará presa ao espaço reservado. Além disso, a tag <noscript> garante que a imagem seja indexada por bots do mecanismo de pesquisa, mesmo que eles não possam entender completamente nosso código JavaScript. Dê uma olhada em como a mágica acontece.
// src/img.tsxConst img = () => {
// ...
return (<> <imgclass = "image" src = "https: // the-placeholder-image" alt = "não há mágica"/> <oscript> <img class = "imagem" src = "https: // o -Actual-Image "alt =" A mágica começa aqui ... "/> </oscript> </>
);}; O observador de interseção tem um bom apoio entre os navegadores, mas não é universal. Você precisará navegadores poli -preenchidos que não o apoiam. Polyfills é algo que você deve fazer conscientemente no nível do aplicativo. Portanto, react-cool-img não o inclui.
Você pode usar o Polyfill do W3C:
$ yarn add intersection-observer# ou $ npm install-save intersection-observer
Em seguida, importe -o no ponto de entrada do seu aplicativo:
importar "Observador de interseção";
Ou use importações dinâmicas para carregar apenas o arquivo quando o polifill for necessário:
(async () => {
if (! ("IntersectionObServer" na janela)) aguarde importar ("interseção-observador");}) ();Polyfill.io é uma maneira alternativa de adicionar o Polyfill quando necessário.
Obrigado a essas pessoas maravilhosas (key emoji):
Bem -estar ? |
Este projeto segue a especificação de todos os contribuintes. Contribuições de qualquer tipo de boas -vindas!
