Languages
[Edit]
DE

React - asynchrones Bildladen

3 points
Created by:
Nikki
10460

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.
Images async loading proof in Google Chrome DevTools - loaded after blue and red lines.
Beweis für asynchrones Bilderladen in Google Chrome DevTools - nach blauen und roten Linien geladen

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

ReactJS (DE)

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