Languages
[Edit]
DE

React - asynchrones Bildladen

3 points
Created by:
Nikki
9950

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