react cool img
v1.2.12
Dies ist eine leichte Reaktions <Img /> -Komponente, mit der Sie als professionelles Typ mit dem Bild -UX (Benutzererfahrung) und der Leistungsoptimierung umgehen können?
Es ermöglicht das Standard img -Tag für viele coole Funktionen, ohne Ihre ursprüngliche Entwicklungserfahrung zu brechen. Im Idealfall kann es ein img -Tag -Ersatz für React.js sein.
⚡️ Live Demo: https://react-cool-img.netlify.app
❤️ Es ist auf Github oder Tweet darüber.
Platzhalter zur Befriedigung verschiedener Bildladezustände (z. B. Ladebild> tatsächliches Bild> Fehlerbild).
Smart Lazy Loading mit Performant und effizienter Weise mit Schnittpunktbeobachter.
Eingebauter Auto-Retry-Mechanismus. Der Benutzer wird Ihre wichtigen Informationen nicht verpassen.
Abbricht alle aktuellen Bilddownloads auf Komponenten.
Unterstützt die Server-Seite-Rendering / JavaScript ist deaktiviert / SEO.
Unterstützt die Definition von TypeScript -Typ.
Winzige Größe (~ 2 KB gziped). Keine externen Abhängigkeiten, abgesehen von react und react-dom .
Einfach zu bedienen.
Euen Die meisten modernen Browser unterstützen den Intersection -Beobachter nativ. Sie können auch Polyfill für den vollständigen Browserunterstützung hinzufügen.
react-cool-img basiert auf React-Hooks. Es erfordert react v16.8+ .
Dieses Paket wird über NPM verteilt.
$ marn add react-cool-img# oder $ npm install--Save-React-Cool-Img
Die Standard-Requisiten der Komponente wurden zum Zwecke der Belastungsoptimierung fein abgestimmt. Beginnen wir es als das folgende Beispiel.
Importieren Sie IMG aus "React-cool-img"; // Schlagen Sie vor, dass Sie mit geringer Qualität oder Vektor-ImagesImport LoadingImage von "./images/Loading.gif";import ERROIMAGE VON" ./images/Err.svg";const App = ((( ) => (
<Imgplaceholder = {loadingImage} src = "https: // the-image-url" error = {errorimage} alt = "react cool img"
/>); Willst du keinen Image -Platzhalter? Keine Sorge, Sie können Inline -Stile oder CSS dafür verwenden. Die Komponente ist mit der Entwicklungserfahrung des normalen img -Tags vollständig kompatibel.
Import IMG aus "React-cool-IMG"; const App = () => (
<ImgStyle = {{HintergrundColor: "Gray", Breite: "480", Höhe: "320"}} src = "https: // the-iMage-url" alt = "react cool img"
/>); Die Bildkomponente funktioniert ähnlich mit Standard img -Tag und mit den folgenden Requisiten.
| Stütze | Typ | Standard | Beschreibung |
|---|---|---|---|
src | Saite | Bildquelle. Es ist required .Unterstützungsformate | |
srcSet | Saite | Bildquellen für reaktionsschnelle Bilder. Nur für src -Prop.Referenzartikel | |
sizes | Saite | Bildgrößen für reaktionsschnelle Bilder. Nur für src -Prop.Referenzartikel | |
width | Saite | Breite des Bildes in PX. | |
height | Saite | Höhe des Bildes in PX. | |
placeholder | Saite | Platzhalterbildquelle. Unterstützungsformate | |
error | Saite | Fehlerbildquelle. Es wird das Platzhalterbild ersetzen. Unterstützungsformate | |
alt | Saite | Ein alternativer Text für einen Bildabschnitt. | |
decode | boolean | true | Verwenden Sie img.decode (), um das Bild vorzubereiten, bevor Sie es rendern. Nützlich, um zu verhindern, dass Hauptfaden durch das Dekodieren eines großen Bildes blockiert. |
lazy | boolean | true | Schalten Sie ein/aus dem faulen Laden ein/aus. Verwenden von Kreuzungsbeobachter |
cache | boolean | true | Laden Sie sofort Bilder, die nach Möglichkeit zwischengespeichert wurden, um das faule Ladeverhalten abzubrechen. Referenzartikel |
debounce | Nummer | 300 | Wie viel zu warten, um in Millisekunden zu warten, muss das Bild im Ansichtsfenster vorhanden sein, bevor er anfängt, zu laden. Dies kann verhindern, dass Bilder heruntergeladen werden, während der Benutzer schnell an ihnen vorbeirollen. |
observerOptions | Objekt | { root: window, rootMargin: '50px', threshold: 0.01 } | Siehe Abschnitt Observeroptions. |
retry | Objekt | { count: 3, delay: 2, acc: '*' } | Siehe den Abschnitt "Wiederholung". |
... | Finden Sie weitere Requisiten und Ereignisse. |
Alle Eigenschaften sind optional .
root: Element | null - Das Element, das als Ansichtsfenster verwendet wird, um die Sichtbarkeit des Ziels zu überprüfen. Muss der Vorfahr des Ziels sein. Standardmäßig zum Browser -Ansichtsfenster, falls nicht angegeben oder wenn null .
rootMargin: string - Rand um das Root. Kann Werte aufweisen, die der CSS -Margeneigenschaft ähnlich sind, z. B. "10px 20px 30px 40px" (oben, rechts, unten, links). Die Werte können Prozentsätze sein. Dieser Wertesatz dient dazu, jede Seite des Begrenzungsfelds des Wurzelelements zu wachsen oder zu verkleinern, bevor die Kreuzungen berechnet werden.
threshold: number - Eine einzige Zahl zwischen 0 und 1, die darauf hinweist, wie viel Prozent der Sichtbarkeit des Ziels der Rückruf des Beobachters ausgeführt werden sollte. Ein Wert von 0 bedeutet, sobald selbst ein Pixel sichtbar ist, der Rückruf wird ausgeführt. 1 bedeutet, dass der Schwellenwert nicht als vergangen angesehen wird, wenn jedes Pixel sichtbar ist.
Alle Eigenschaften sind optional .
count: number - Gibt die Anzahl an, mit denen Sie wiederholen möchten. Stellen Sie es auf 0 ein. Deaktiviert die Auto-Retry.
delay: number - Gibt die Verzögerung zwischen den Wiederholungen in Sekunden an.
acc: string | false - Gibt an, wie die Verzögerung bei jedem Wiederholung angesammelt werden sollte. Es akzeptiert die folgenden Werte:
'*' (default) - Multiplizieren Sie die Verzögerung nach jedem nachfolgenden Wiederieren mit dem angegebenen delay , z. B. delay: 2 bedeutet, dass das Wiederieren nach 2 Sekunden, 4 Sekunden, 8 Sekunden und so weiter läuft.
'+' - Inkrementverzögerung Nach jedem Wiederieren durch den angegebenen delay , z. B. delay: 2 bedeutet, dass Wiederholung nach 2 Sekunden, 4 Sekunden, 6 Sekunden usw. verläuft.
false - Halten Sie die Verzögerungskonstante zwischen den Wiederholungen, z. B. delay: 2 bedeutet, dass das Wiederieren alle 2 Sekunden verläuft.
Das Laden von faulen Bild über die Schnittbeobachter -API ist gut. Aber könnte es größer sein, ein Bild nur dann herunterzuladen, wenn der Benutzer es sehen möchte? Oder faul für zwischengespeicherte Bilder faul laden? Die Antwort lautet Ja und diese Funktionen werden bereits von den debounce und cache -Requisiten in react-cool-img integriert.
Nach der debounce -Prop kann ein Bild warten, um heruntergeladen zu werden, während es für eine festgelegte Zeit im Ansichtsfenster ist. In Fällen, in denen Sie eine lange Liste von Bildern haben, die der Benutzer möglicherweise versehentlich scrollen kann. Zu diesem Zeitpunkt kann das Laden von Bildern zu unnötigen Verschwendung von Bandbreite und Verarbeitungszeit führen.
Importieren Sie IMG aus "React-cool-img"; importieren Sie defaultImg aus "./images/default.svg";const app = () => (
<Imgplaceholder = {defaultImg} src = "https: // the-image-url" deboce = {1000} // Standard ist 300 (ms) alt = "react cool img".
/>); Durch die cache -Requisite werden Bilder, die Sie bereits zwischengespeichert haben, faul laden, bis der Benutzer beim nächsten Mal Ihre App besucht. Für alle verbleibenden Bilder, die nicht zwischengespeichert wurden, ist ein fauler Laden eingerichtet. Dies ist für UX hilfreich, da es nicht viel zusätzliche Arbeit gibt, zwischen zwischengespeicherte Bilder zu laden, und es ist ein einfacher Gewinn dafür, dass die Benutzeroberfläche intuitiver aussieht.
Importieren Sie IMG aus "React-cool-img"; importieren Sie defaultImg aus "./images/default.svg";const app = () => (
<Imgplaceholder = {defaultImg} src = "https: // the-image-url" cache // Standard ist wahr, nur für Demoalt = "React Cool img"
/>); Es gibt zwei Herausforderungen beim Laden von faulem Bild mit serverseitigem Rendering. Einer ist JavaScript -Verfügbarkeit der andere ist SEO. Glücklicherweise können wir <noscript> Tag verwenden, um diese Probleme zu lösen. Es wird das tatsächliche Bild als Fallback machen, wenn JavaScript deaktiviert ist. Der Benutzer wird also nicht das Bild sehen, das mit dem Platzhalter klebt. Darüber hinaus stellt das <noscript> Tag sicher, dass das Bild von Suchmaschinenbots indiziert wird, auch wenn sie unseren JavaScript -Code nicht vollständig verstehen können. Schauen Sie sich an, wie Magie passiert.
// src/img.tsxconst img = () => {
// ...
return (<> <imgclass = "Image" src = "https: // the-plopledeholder-image" alt = "Es gibt keine Magie"/> <noscript> <img class = "image" src = "https: // die -Aktual-image "Alt =" Die Magie beginnt hier ... "/> </noscript> </>
);}; Intersection Observer hat unter den Browsern gute Unterstützung, aber es ist nicht universell. Sie müssen Browser aus Polyfonie haben, die es nicht unterstützen. Polyfills sollten Sie auf Anwendungsebene bewusst tun. Deshalb schließt es react-cool-img nicht ein.
Sie können die Polyfill von W3C verwenden:
$ marn add intersection-Observer# oder $ npm Install-Save Intersection-Observer
Importieren Sie es dann in den Einstiegspunkt Ihrer App:
"Intersection-Observer" importieren;
Oder verwenden Sie dynamische Importe, um die Datei nur zu laden, wenn die Polyfill erforderlich ist:
(async () => {
if (! ("intersectionObserver" im Fenster) wartet import ("Intersection-Observer");}) ();Polyfill.io ist eine alternative Möglichkeit, die Polyfill bei Bedarf hinzuzufügen.
Vielen Dank an diese wunderbaren Menschen (Emoji -Schlüssel):
WELLY ? |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
