Languages
[Edit]
PL

Popraw szybko┼Ť─ç ┼éadowania si─Ö aplikacji React dzi─Öki asynchronicznemu ┼éadowaniu obrazów

6 points
Created by:
Dirask Community
5850

Cze┼Ť─ç! 👋 😊

Czy wiedzia┼ée┼Ť, ┼╝e je┼Ťli za┼éadujesz obrazy na stronie┬ápo za┼éadowaniu reszty jej zawarto┼Ťci, u┼╝ytkownik zobaczy tre┼Ť─ç┬áwcze┼Ťniej, a narz─Ödzia SEO wykryj─ů, ┼╝e strona ┼éaduje si─Ö szybciej? 🚀📈

W tym artykule poka┼╝─Ö wam, jak w React┬ástworzy─ç prosty komponent, za pomoc─ů kt├│rego obrazy s─ů┬á┼éadowane dopiero┬ápo za┼éadowaniu wszystkich innych zasob├│w.

Takie podej┼Ťcie przyspiesza ┼éadowanie strony, dziel─ůc proces ┼éadowania na 2 etapy:

  • ┼éadowanie strony (bez obraz├│w asynchronicznych) - dzi─Öki czemu wcze┼Ťniej zobaczymy wszystkie potrzebne rzeczy we w┼éa┼Ťciwej kolejno┼Ťci,
  • ┼éadowanie obraz├│w asynchronicznych - obrazy zostan─ů za┼éadowane dopiero, gdy strona b─Ödzie gotowa.

Efekt końcowy:

dow├│d wczytywania asynchronicznego obraz├│w w Google Chrome DevTools
dow├│d wczytywania asynchronicznego obraz├│w w Google Chrome DevTools

Strza┼éki wskazuj─ů linie, gdzie nast─ůpi┼éo ┼éadowanie obraz├│w,┬ápo wyrenderowaniu ca┼éej strony.

Poni┼╝ej przedstawiam rozwi─ůzanie w React, w kt├│rym tworz─Ö w pami─Öci┬áimage, kt├│ry┬ápo za┼éadowaniu sygnalizuje aby wy┼Ťwietli─ç odpowiedni obraz┬ána stronie.

Uruchamialny przykład:

// 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>Tutaj jaki┼Ť tekst...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png" />
        <p>Tutaj jaki┼Ť tekst...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png" />
        <p>Tutaj jaki┼Ť tekst...</p>
        <AsyncImage src="https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png" />
      </div>
    );
};

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

Zalecam skopiowanie rozwi─ůzania do w┼éasnego, lokalnego projektu React, otworzenie narz─Ödzi programistycznych w przegl─ůdarce, a nast─Öpnie uruchomienie aplikacji, aby zobaczy─ç rezultat.

Je┼Ťli uwa┼╝asz ten artyku┼é za przydatny i chcia┼éby┼Ť otrzymywa─ç wi─Öcej podobnych tre┼Ťci, mo┼╝esz zareagowa─ç na ten post. 😊

Do zobaczenia w kolejnych postach! 🖐

Zobacz r├│wnie┼╝

ReactJS - Artykuły

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