DEV Community

loading...
Cover image for React - async image loading

React - async image loading

Dirask-React
We share coding tips and tricks in React ❤️ 💻 🙂. We help to solve React problems at http://dirask.com
Originally published at dirask.com ・2 min read

Hi there! 👋 😊

Did you know that if you load images after the page is loaded, the user will see the content earlier and SEO tools will detect that the page loads faster? 🚀📈

Before we start, I would highly recommend you to check out runnable example for the solution on our website: React - async image loading

In this article, I want to show you how to create a simple component in React by which the graphics are loaded after all resources are loaded.

That approach speeds up page loading by splitting the loading process into two steps:

  • page loading (without async images) - we see all necessary things in the right order sooner,
  • async images loading - images are loaded when the page is ready.

Final effect:image
Arrows mark lines when images are loaded after rendering the page (when it's ready).

Below I present you a solution in which I create an in-memory only image that, after is loaded, signals to display the proper image in React on the web page.

Practical example:

import React from 'react';

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

export default App;
Enter fullscreen mode Exit fullscreen mode

I recommend copying the solution to your local React project, open developer tools in your browser and then run the application to see the result.

If you found this article useful and would like to receive more content like this, you could react to this post, which would make me very happy. 😊

See you in the next posts! 🖐


Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

Discussion (6)

Collapse
talorlanczyk profile image
TalOrlanczyk

Well you can do like medium and save a small version of an image and it by default will make it blur and once it load you replace with a real one
But still great job and its really important stuff great job

Collapse
buriti97 profile image
buridev • Edited

i will try today, thanks

Collapse
edimeri profile image
Erkand Imeri • Edited

Where did you get this?

I mean the new Image() class?

const image = new Image();

Collapse
georgexchelebiev profile image
Collapse
myzel394 profile image
Myzel394

I think you can achieve the same by simply using native lazy loading.
web.dev/browser-level-image-lazy-l...

Collapse
nirmal15mathew profile image
Nirmal Crazy-Science

Yes, we can. But I think it will be more useful if we combine the browser level lazy loading and create an image component which can be reused