react cool img
v1.2.12
Este es un componente Ligero React <Img /> , que le ayuda a manejar la imagen UX (experiencia del usuario) y la optimización del rendimiento como un tipo profesional.
Empodera la etiqueta img estándar de muchas características geniales sin romper su experiencia de desarrollo original. Idealmente, puede ser un reemplazo de etiqueta img para React.js.
⚡️ Demo en vivo: https://react-cool-img.netlify.app
❤️ It recorre en Github o tuitea al respecto.
Marcadores de posición para satisfacer varios estados de carga de imágenes (por ejemplo, imagen de carga> imagen real> imagen de error).
Carga perezosa inteligente con una forma performadora y eficiente, utilizando el observador de intersección.
Mecanismo de auto-Retra incorporado. El usuario no se perderá su información importante.
Aborta cualquier descarga de imagen actual en componentes desmontados potencialmente guardando el ancho de banda y los recursos del navegador.
Admite Rendering del lado del servidor / JavaScript está deshabilitado / SEO.
Admite la definición de tipo TypeScript.
Tamaño pequeño (~ 2kb Gzipped). No hay dependencias externas, aparte de react y react-dom .
Fácil de usar.
️ La mayoría de los navegadores modernos admiten observador de intersección de forma nativa. También puede agregar polyfill para el soporte completo del navegador.
react-cool-img se basa en los ganchos React. Requiere react v16.8+ .
Este paquete se distribuye a través de NPM.
$ Yarn Agregar react-Cool-IMg# o $ npm instalación --save react-cool-img
Los accesorios predeterminados del componente se han ajustado con el fin de la optimización de la carga. Comencemos como el siguiente ejemplo.
Importar IMG de "React-Cool-Img"; // Sugerir para usar la carga de ImagesMort de baja calidad o vectorial desde "./images/loading.gif"; ) => (
<Imgplaceholder = {LoadingImage} src = "https: // the-image-url" error = {errorImage} alt = "react cool img"
/>); ¿No quieres un marcador de posición de imagen? No se preocupe, puede usar estilos en línea o CSS para ello. El componente es totalmente compatible con la experiencia de desarrollo de la etiqueta img normal.
Importar IMG de "React-Cool-IMG"; const app = () => (
<Imgstyle = {{backgroundColor: "Gray", ancho: "480", altura: "320"}} src = "https: // the -image-url" alt = "react cool img" "
/>); El componente de imagen funciona de manera similar con la etiqueta img estándar y con los siguientes accesorios.
| Apuntalar | Tipo | Por defecto | Descripción |
|---|---|---|---|
src | cadena | Fuente de imagen. Es required .Formatos de soporte | |
srcSet | cadena | Fuentes de imágenes para imágenes receptivas. Solo para src Prop.Artículo de referencia | |
sizes | cadena | Tamaños de imagen para imágenes receptivas. Solo para src Prop.Artículo de referencia | |
width | cadena | Ancho de la imagen en PX. | |
height | cadena | Altura de la imagen en PX. | |
placeholder | cadena | Fuente de la imagen del marcador de posición. Formatos de soporte | |
error | cadena | Fuente de imagen de error. Reemplazará la imagen del marcador de posición. Formatos de soporte | |
alt | cadena | Un texto alternativo para una sección de imagen. | |
decode | booleano | true | Use img.decode () para predecode la imagen antes de renderizarla. Útil para evitar que el hilo principal bloquee mediante la decodificación de una imagen grande. |
lazy | booleano | true | Encender/apagar la carga perezosa. Usar observador de intersección |
cache | booleano | true | Cargue instantáneamente imágenes que se hayan almacenado en caché cuando sea posible para abortar el comportamiento de carga perezosa. Artículo de referencia |
debounce | número | 300 | Cuánto esperar en milisegundos que la imagen debe estar en la vieve antes de comenzar a cargarse. Esto puede evitar que las imágenes se descarguen mientras el usuario se desplazan rápidamente. |
observerOptions | objeto | { root: window, rootMargin: '50px', threshold: 0.01 } | Consulte la sección ObserverOptions. |
retry | objeto | { count: 3, delay: 2, acc: '*' } | Ver la sección Reintentar. |
... | Encuentra más accesorios y eventos. |
Todas las propiedades son optional .
root: Element | null : el elemento que se usa como ventana gráfica para verificar la visibilidad del objetivo. Debe ser el antepasado del objetivo. El valor predeterminado a la vista del navegador si no se especifica o si es null .
rootMargin: string : margen alrededor de la raíz. Puede tener valores similares a la propiedad del margen CSS, por ejemplo "10px 20px 30px 40px" (arriba, derecha, abajo, izquierda). Los valores pueden ser porcentajes. Este conjunto de valores sirve para crecer o encoger cada lado del cuadro delimitador del elemento raíz antes de calcular las intersecciones.
threshold: number : un número único entre 0 y 1, que indica en qué porcentaje de visibilidad del objetivo se debe ejecutar la devolución de llamada del observador. Un valor de 0 significa tan pronto como incluso un píxel sea visible, la devolución de llamada se ejecutará. 1 significa que el umbral no se considera que se pase hasta que cada píxel sea visible.
Todas las propiedades son optional .
count: number : especifica la cantidad de veces que desea volver a intentarlo. Establecerlo en 0 deshabilitará Auto-Retry.
delay: number : especifica el retraso entre reintentos en segundos.
acc: string | false : especifica cómo se debe acumular el retraso con cada reintento. Acepta los siguientes valores:
'*' (default) : multiplique el retraso después de cada reintento posterior por el valor delay dado, por ejemplo, delay: 2 significa que el reintento se ejecutará después de 2 segundos, 4 segundos, 8 segundos, etc.
'+' - Retraso de incremento Después de cada reintento por el valor delay dado, por ejemplo, delay: 2 significa que el reintento se ejecutará después de 2 segundos, 4 segundos, 6 segundos, etc.
false : mantenga el retraso constante entre reintentos, por ejemplo, delay: 2 significa que el reintento se ejecutará cada 2 segundos.
La carga de la imagen perezosa a través de la API del observador de intersección es buena. Pero, ¿podría ser mayor descargar una imagen solo cuando el usuario quiere verla? ¿O la carga perezosa para imágenes en caché? La respuesta es sí y estas características ya están integradas en react-cool-img por los accesorios debounce y cache .
Según el accesorio debounce , una imagen puede esperar para ser descargada mientras está en la ventana gráfica para una hora establecida. En los casos en que tiene una larga lista de imágenes por las que el usuario podría desplazarse inadvertidamente. En este momento, las imágenes de carga pueden causar un desperdicio innecesario de ancho de banda y tiempo de procesamiento.
Importar IMG de "React-Cool-Img"; importar defaultimg desde "./images/default.svg";const app = () => (
<Imgplaceholder = {defaultImg} src = "https: // the -image-URL" Debuncion = {1000} // El valor predeterminado es 300 (ms) alt = "react cool img"
/>); Según el accesorio cache , las imágenes que ya ha almacenado en caché abortarán la carga perezosa hasta que el usuario visite su aplicación la próxima vez. La carga perezosa se configura para cualquier imagen restante que no se almacenara en caché. Esto es útil para UX, porque no hay mucho trabajo adicional para cargar imágenes en caché de inmediato y es una victoria fácil para hacer que la interfaz de usuario se vea más intuitiva.
Importar IMG de "React-Cool-Img"; importar defaultimg desde "./images/default.svg";const app = () => (
<Imgplaceholder = {defaultImg} src = "https: // the -image-URL" Cache // El valor predeterminado es verdadero, solo para DemoalT = "React Cool IMG"
/>); Hay dos desafíos al hacer una carga de imagen perezosa con representación del lado del servidor. Uno es la disponibilidad de JavaScript, la otra es SEO. Afortunadamente, podemos usar la etiqueta <noscript> para resolver estos problemas. Presentará la imagen real como respaldo si JavaScript está deshabilitado, por lo que el usuario no verá la imagen que se atasca con el marcador de posición. Además, la etiqueta <noscript> asegura que la imagen esté indexada por los bots del motor de búsqueda, incluso si no pueden comprender completamente nuestro código JavaScript. Echa un vistazo a cómo sucede la magia.
// src/img.tsxconst img = () => {
// ...
return (<> <imgclass = "image" src = "https: // the-placeholder-image" alt = "no hay magia"/> <roscript> <img class = "image" src = "https: // the the the -Actual-Image "Alt =" La magia comienza aquí ... "/> </roscript> </>
);}; El observador de intersección tiene un buen apoyo entre los navegadores, pero no es universal. Deberá que los navegadores pololegados que no lo admitan. Polyfills es algo que debe hacer conscientemente en el nivel de aplicación. Por lo tanto, react-cool-img no lo incluye.
Puede usar el polyfill de W3C:
$ YARN Agregar intersección-observador# o $ npm instalación --save intersection-observver
Luego importárelo en el punto de entrada de su aplicación:
importar "intersección-observer";
O use las importaciones dinámicas para cargar solo el archivo cuando se requiere el polyfill:
(async () => {
if (! ("intersectionObServer" en la ventana)) espera import ("intersección-observer");}) ();PolyFill.io es una forma alternativa de agregar el polyfill cuando sea necesario.
Gracias a estas maravillosas personas (Key Emoji):
Tanilamente ? |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Contribuciones de cualquier tipo bienvenido!
