React - asynchrones Bildladen

In diesem kurzen Beitrag wird gezeigt, wie man Bilder im asynchronen Modus in React lädt. Als asynchroner Modus wird das Bilderladen verstanden, wenn alle Ressourcen geladen sind und nicht das Sperren des Ladens anderer synchroner Ressourcen. 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.

Praktisches 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);