Languages
[Edit]
EN

React - async image loading

12 points
Created by:
Gigadude
341

In this short article, we would like to show how to load images in an async mode in React. As async mode we understand the images loading occurs after all resources are loaded, do not blocking other sync resources loading. That approach speeds up page loading by splitting the loading process into 2 steps:

  • page loading (without async images) - we see all necessary things in the correct way faster,
  • async images loading - images are loaded when the page is ready.
Images async loading proof in Google Chrome DevTools - loaded after blue and red lines.
Images async loading proof in Google Chrome DevTools - loaded after blue and red lines.

Quick solution (add loading="lazy" to img elements):

<img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" loading="lazy" />

 

Practical example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" loading="lazy" />
  <p>Some text here ...</p>
  <img src="https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png" loading="lazy" />
  <p>Some text here ...</p>
  <img src="https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png" loading="lazy" />
  <p>Some text here ...</p>
  <img src="https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png" loading="lazy" />
</body>
</html>

Custom solution

This lets to load images in async mode, even the browser doesn't support loading="lazy".

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

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

References

ReactJS

React - async image loading
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