react cool img
v1.2.12
Il s'agit d'un composant React <Img /> léger, qui vous aide à gérer l'image UX (expérience utilisateur) et l'optimisation des performances en tant que gars professionnel?
Il habilite la balise img standard par de nombreuses fonctionnalités intéressantes sans casser votre expérience de développement d'origine. Idéalement, il peut être un remplacement de la balise img pour react.js.
⚡️ démo en direct: https://react-cool-img.netlify.app
❤️ Il est sur github ou tweetez à ce sujet.
Planificateurs pour satisfaire divers états de chargement d'images (par exemple, image de chargement> image réelle> Image d'erreur).
Chargement paresseux intelligent de manière performante et efficace, en utilisant l'observateur d'intersection.
Mécanisme de rétraction automatique intégrée. L'utilisateur ne manquera pas vos informations importantes.
Aborte tous les téléchargements d'image actuels sur les composants Unmont potentiellement enregistrer la bande passante et les ressources de navigateur.
Prend en charge le rendu du serveur / JavaScript est désactivé / SEO.
Prend en charge la définition de type dactylographié.
Taille minuscule (~ 2KB gzipipped). Pas de dépendances externes, à part pour la react et react-dom .
Facile à utiliser.
️ La plupart des navigateurs modernes soutiennent l'observateur d'intersection nativement. Vous pouvez également ajouter des polyfills pour la prise en charge complète du navigateur.
react-cool-img est basé sur des crochets React. Il nécessite react v16.8+ .
Ce package est distribué via NPM.
$ yarn Ajouter React-Cool-IMG # ou $ npm Installer - Savec React-Cool-IMG
Les accessoires par défaut du composant ont été affinés dans le but de charger l'optimisation. Commençons comme l'exemple suivant.
Importer IMG à partir de "React-Cool-IMG"; // suggère d'utiliser un chargement d'images de faible qualité ou vectoriel de "./images/loking.gif" ) => (
<ImgPlaceHolder = {chargeingImage} src = "https: // the-image-url" error = {errorImage} alt = "react cool img"
/>); Vous ne voulez pas d'espace réservé d'image? Pas de soucis, vous pouvez utiliser des styles en ligne ou des CSS. Le composant est entièrement compatible avec l'expérience de développement de la balise img normale.
Importer IMG à partir de "react-cool-iMg"; const app = () => (
<Imgstyle = {{backgroundColor: "gris", largeur: "480", hauteur: "320"}} src = "https: // the-image-url" alt = "react cool img"
/>); Le composant d'image fonctionnant similaire avec la balise img standard et avec les accessoires suivants.
| Soutenir | Taper | Défaut | Description |
|---|---|---|---|
src | chaîne | Source d'image. C'est required .Formats de support | |
srcSet | chaîne | Sources d'image pour les images réactives. Pour src Prop uniquement.Article de référence | |
sizes | chaîne | Tailles d'image pour les images réactives. Pour src Prop uniquement.Article de référence | |
width | chaîne | Largeur de l'image dans PX. | |
height | chaîne | Hauteur de l'image en px. | |
placeholder | chaîne | Source de l'image d'image. Formats de support | |
error | chaîne | Source d'image d'erreur. Il remplacera l'image d'espace réservé. Formats de support | |
alt | chaîne | Un autre texte pour une section d'image. | |
decode | booléen | true | Utilisez img.decode () pour pré-décoder l'image avant de le rendre. Utile pour empêcher le fil principal de bloquer par décodage de grande image. |
lazy | booléen | true | Allumez / désactivez le chargement paresseux. Utilisation d'observateurs d'intersection |
cache | booléen | true | Chargez instantanément des images qui ont été mises en cache lorsque cela est possible pour interrompre le comportement de chargement paresseux. Article de référence |
debounce | nombre | 300 | Combien attendre en millisecondes que l'image doit être dans la fenêtre avant de commencer à charger. Cela peut empêcher le téléchargement des images pendant que l'utilisateur défile rapidement. |
observerOptions | objet | { root: window, rootMargin: '50px', threshold: 0.01 } | Voir la section ObserverOptions. |
retry | objet | { count: 3, delay: 2, acc: '*' } | Voir la section RETRY. |
... | Trouvez plus d'accessoires et d'événements. |
Toutes les propriétés sont optional .
root: Element | null - L'élément utilisé comme fenêtre pour vérifier la visibilité de la cible. Doit être l'ancêtre de la cible. Par défaut, la fenêtre du navigateur si elle n'est pas spécifiée ou si null .
rootMargin: string - marge autour de la racine. Peut avoir des valeurs similaires à la propriété de marge CSS, par exemple "10px 20px 30px 40px" (haut, droit, en bas, gauche). Les valeurs peuvent être des pourcentages. Cet ensemble de valeurs sert à croître ou à rétrécir chaque côté de la boîte de délimitation de l'élément racine avant de calculer les intersections.
threshold: number - un seul numéro entre 0 et 1, qui indique le pourcentage de la visibilité de la cible. Le rappel de l'observateur doit être exécuté. Une valeur de 0 signifie dès que même un pixel est visible, le rappel sera exécuté. 1 signifie que le seuil n'est pas considéré comme passé jusqu'à ce que chaque pixel soit visible.
Toutes les propriétés sont optional .
count: number - Spécifie le nombre de fois que vous souhaitez réessayer. Le régler sur 0 désactivera la rétraction automatique.
delay: number - Spécifie le retard entre les tentatives en secondes.
acc: string | false - Spécifie comment le retard doit être accumulé à chaque réessayer. Il accepte les valeurs suivantes:
'*' (default) - Multipliez le retard après chaque réessayer par la valeur delay donnée, par exemple, delay: 2 signifie que Retry fonctionnera après 2 secondes, 4 secondes, 8 secondes, etc.
'+' - retard d'incrément après chaque réessayer par la valeur delay donnée, delay: 2 signifie que Retry fonctionnera après 2 secondes, 4 secondes, 6 secondes, etc.
false - Gardez le retard constant entre les tentatives, par exemple delay: 2 signifie que la réessayer fonctionnera toutes les 2 secondes.
Le chargement d'image paresseux via l'API de l'observateur d'intersection est bon. Mais pourrait-il être plus grand de télécharger une image uniquement lorsque l'utilisateur veut le voir? Ou contourner le chargement paresseux pour les images en cache? La réponse est oui et ces fonctionnalités sont déjà intégrées à react-cool-img par les accessoires debounce et cache .
Par le debounce , une image peut attendre d'être téléchargée pendant qu'elle se trouve dans la fenêtre pour une heure définie. Dans les cas où vous avez une longue liste d'images que l'utilisateur peut faire défiler par inadvertance. À l'heure actuelle, le chargement des images peut provoquer un gaspillage inutile de bande passante et de temps de traitement.
Importez IMG à partir de "react-cool-iMg"; importer defaultImg à partir de "./images/default.svg" ;const app = () => (
<ImgPlaceHolder = {defaultImg} src = "https: // the-image-url" Debounce = {1000} // par défaut est 300 (ms) alt = "react cool img"
/>); Par le cache accessoire, les images que vous avez déjà mises en cache abandonnent le chargement paresseux jusqu'à ce que l'utilisateur visite votre application la prochaine fois. Le chargement paresseux est configuré pour toutes les images restantes qui n'ont pas été mises en cache. Ceci est utile pour UX, car il n'y a pas beaucoup de travail supplémentaire pour charger immédiatement des images mises en cache et est une victoire facile pour rendre l'interface utilisateur plus intuitive.
Importez IMG à partir de "react-cool-iMg"; importer defaultImg à partir de "./images/default.svg" ;const app = () => (
<ImgPlaceHolder = {defaultImg} src = "https: // the-image-url" cache // par défaut est vrai, juste pour demoalt = "react cool img"
/>); Il y a deux défis lors du chargement d'image paresseux avec un rendu côté serveur. L'un est la disponibilité JavaScript, l'autre est le référencement. Heureusement, nous pouvons utiliser la balise <noscript> pour résoudre ces problèmes. Il rendra l'image réelle en tant que repli si JavaScript est désactivé, donc l'utilisateur ne verra pas l'image qui sera coincée avec l'espace réservé. De plus, la balise <noscript> garantit que l'image est indexée par les bots de moteur de recherche même s'ils ne peuvent pas comprendre pleinement notre code JavaScript. Jetez un œil à la façon dont la magie se produit.
// src / img.tsxconst img = () => {
// ...
return (<> <imgclass = "image" src = "https: // the-placeholder-image" alt = "il n'y a pas de magie" /> <noscript> <img class = "image" src = "https: // le -Actual-Image "alt =" La magie commence ici ... "/> </soscript> </>
);}; L'observateur d'intersection a un bon soutien parmi les navigateurs, mais ce n'est pas universel. Vous aurez besoin de navigateurs polyfillons qui ne le soutiennent pas. Les polyfills sont quelque chose que vous devriez faire consciemment au niveau de l'application. Par conséquent, react-cool-img ne l'inclut pas.
Vous pouvez utiliser le polyfill de W3C:
$ yarn Ajouter l'intersection-Observer # ou $ npm install - Save Intersection-Observer
Puis l'importez-le au point d'entrée de votre application:
importer "intersection-observer";
Ou utilisez des importations dynamiques pour charger le fichier uniquement lorsque le polyfill est requis:
(async () => {
if (! ("IntersectionObserver" dans Window)) attendez l'importation ("Intersection-Observer");}) ();Polyfill.io est un autre moyen d'ajouter le polyfill en cas de besoin.
Merci à ces gens merveilleux (clé emoji):
Se soulager ? |
Ce projet suit les spécifications de tous les contributeurs. Contributions de toute nature bienvenue!
