PL
React - asynchroniczne ładowanie obrazów
0 points
W tym krótkim artykule chcielibyśmy pokazać, jak ładować obrazy w trybie asynchronicznym w Reakcie.
W trybie asynchronicznym ładowanie obrazów następuje po załadowaniu wszystkich zasobów, co nie blokuje synchronicznego ładowania innych zasobów. Takie podejście przyspiesza ładowanie strony, dzieląc proces ładowania na dwa etapy:
- ładowanie strony (bez obrazów asynchronicznych) - dzięki czemu szybciej widzimy wszystkie niezbędne rzeczy we właściwej kolejności,
- ładowanie obrazów asynchronicznych - obrazy zostaną załadowane dopiero, gdy strona będzie gotowa.
Praktyczny przykład:
xxxxxxxxxx1
//import React from 'react';2
//import ReactDOM from 'react-dom';3
4
const AsyncImage = (props) => {5
const [loadedSrc, setLoadedSrc] = React.useState(null);6
React.useEffect(() => {7
setLoadedSrc(null);8
if (props.src) {9
const handleLoad = () => {10
setLoadedSrc(props.src);11
};12
const image = new Image();13
image.addEventListener('load', handleLoad);14
image.src = props.src;15
return () => {16
image.removeEventListener('load', handleLoad);17
};18
}19
}, [props.src]);20
if (loadedSrc === props.src) {21
return (22
<img {props} />23
);24
}25
return null;26
};27
28
const App = () => {29
return (30
<div>31
<AsyncImage src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />32
<p>Tutaj jakiś tekst...</p>33
<AsyncImage src="https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png" />34
<p>Tutaj jakiś tekst...</p>35
<AsyncImage src="https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png" />36
<p>Tutaj jakiś tekst...</p>37
<AsyncImage src="https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png" />38
</div>39
);40
};41
42
const root = document.querySelector('#root');43
ReactDOM.render(<App />, root);