Languages
[Edit]
DE

Verbesserung der Ladegeschwindigkeit der React-App mithilfe von asynchronen Bildladen

3 points
Created by:
Nikki
9920

Hallo! 👋 😊

Hast du gewusst, dass, wenn du Bilder auf einer Seite l├Ądst, wenn der Rest des Inhalts schon geladen ist, sieht der Benutzer den Inhalt fr├╝her? Und SEO-Tolls erkennen, dass die Seite schneller l├Ądt?┬á🚀📈

In diesem Beitrag zeige ich, wie ein einfaches Komponent in React erstellt werden kann, wenn alle anderen Ressourcen schon geladen sind. 

Dieser Ansatz beschleunigt das Seiteladen, indem der Ladevorgang in 2 Stufen unterteilt wird:

  • das Seiteladen (ohne asynchrone Bilder) - damit man alles, was man braucht, fr├╝her in der richtigen Reihenfolge sieht,
  • das Laden von asynchronen Bildern┬á- Bilder werden erst geladen, wenn die Seite fertig ist.

Das Endergebnis:

dow├│d wczytywania asynchronicznego obraz├│w w Google Chrome DevTools
Der Beweis des asynchronen Bildladens in Google Chrome DevTools

Die Pfeile zeigenn die Zeilen an, in denen das Laden der Bilder erfolgte, nach dem Rendern der gesamten Seite. 

Unten sieht man die L├Âsung in React, wo ich im Speicher┬áimage┬áerstelle, das beim Laden signalisiert, das entsprechende Bild auf der Seite anzuzeigen.

Lauff├Ąhiges Beispiel:

// ONLINE-RUNNER:browser;

//import React from 'react';
//import ReactDOM from 'react-dom';

const AsyncImage = (props) => {
  	const [loadedSrc, setLoadedSrc] = React.useState(null);
  	React.useEffect(() => {
      	setLoadedSrc(null);
      	if (props.src) {
          	const handleLoad = () => {
            	setLoadedSrc(props.src);
            };
            const image = new Image();
            image.addEventListener('load', handleLoad);
          	image.src = props.src;
            return () => {
              	image.removeEventListener('load', handleLoad);
            };
        }
    }, [props.src]);
  	if (loadedSrc === props.src) {
        return (
            <img {...props} />
        );
    }
  	return null;
};

const App = () => {
    return (
      <div>
        <AsyncImage src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
        <p>Etwas Text hier ...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png" />
        <p>Etwas Text hier ...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png" />
        <p>Etwas Text hier ...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png" />
      </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Ich empfehle, die L├Âsung in dein eigenes lokales┬áReact-Projekt┬ázu kopieren, die DevTools im Browser zu ├Âffnen und dann die App zu starten, um das Ergebnis zu sehen.

Wenn du diesen Artikel n├╝tzlich findest und weitere ├Ąhnliche Inhalte w├╝nschst, kannst du gerne auf diesen Beitrag antwortest.┬á😊

Bis in die kommenden Beitr├Ąge! 🖐

Siehe auch

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join