Progressively Load Images in React — Basic Version

You’ve always wanted that users have just a little more patience and stick around while your website loads. But it seems like their patience always runs out and by the time your website loads or let’s say images on your website load (for the context here), the user has already made up their mind to hit that cross button on the tab and you can’t do anything about it now. Sounds frightening, right?

But what if you had the power to tell your users, “Hey wait!! The image is about to load. You just have to be a bit more patient!” with the help of just a single JavaScript event, onload and the users are already there waiting for your images to load? Feeling like Jean Grey already ?

So now that you know you are going to learn a new superpower, let’s dive straight into the implementation of progressive loading in your react app.

Let’s start with setting up a brand new react app with the help of create-react-app. Simply open your terminal and type in the following command to setup a react app.

npx create-react-app progressive-loading

Once all the required modules are downloaded, cd into progressive-loading (your app name) and type npm start in the terminal. Your basic app should be up and running on localhost:3000.

Before we move any further in our app, we first need a json file containing images which will be displayed in the app and the best place to get such a json is Unsplash. You can get the Unsplash json response from here.

In the root folder of your app, create a new folder inside the src folder by the name images and create a images.json file inside this folder. Inside this json file, paste the above json response. Now we are all set to write our main code.

Code Implementation

Create a new folder , components inside src folder. We will create a component that will act as our React Image component accepting various props and will be loading the image to the app.

So let’s begin by creating a component for images. Create a new file inside components folder by the name , Image.js which should look somewhat like the below snippet.

As we can see in the above code , we have used an onLoad event as an attribute to the img tag. Also, we are using the imgLoaded state to re-render the component . Along with all this we are also conditionally changing the className of the img tag as well.

So as soon as the image data is completely fetched by your network, the onLoad event gets triggered and the state of the component updates to

imgLoaded:true

Similarly the className is also updated from ‘image blur’ to ‘image’. The entire magic lies in this part. To completely understand what is happening here , we need to create a css file. Inside your components folder, create another folder, styles and inside this folder create a file, image.css having the following content:

.image {
max-width: 100%;
transition: all 0.4s ease-in-out;
}
.blur {
filter: blur(10px);
}

The superpower theory

The trick that we are using here to give an illusion to the user that the image is almost loaded is the css filter property. So until the entire image data is fetched over the network, the className of the img tag is set to “image blur ” which slowly transitions to no-filter i.e. className changes to “image” as soon as the Image component is re-rendered i.e. onLoad event is triggered. This transition from blur to no blur is actually helping us to convey our message to the user to be a bit more patient and the best part is that the user will actually wait because now they are able to get a glimpse of what is actually being loaded even before the entire image is loaded. And you know what, an enhanced version of this simple trick is also being used by Medium itself to load images on their page :’). As is pretty obvious, we can always further enhance the effect by adding all kinds of fancy css animations to tweak the effect to our needs.

Now that we have learned the super power theory and gained all the knowledge , its time to see it in action. For that we just need to fetch image data inside App.js file. Copy paste the following snippet inside your app.js file and save all the files.

Make sure you have the images.json file at the right place. This component is pretty straight forward. Here, we are simply looping through all the images and loading them with the help of Image component that we created previously by passing in the required props.

Also, add the following lines to App.css (This is not to be strictly followed).

.app {
display: flex;
justify-content: center;
padding-top: 1em;
}
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 400px;
}
.wrapper {
padding: 1em 0;
}

The End Result

Finally , the result on your browser at localhost:3000 should look pretty similar to the below gif.

End Result

As we can notice here , that until the images are loaded completely, they have a blur effect applied to them and as soon as the entire data is received, the blur effect vanishes and the high resolution image is loaded.

In case you are not able to completely mimic this effect on your system i.e. not able to see the blur effect, it is probably because you have a faster internet connection.

But wait a minute, we can counter this problem. We can simulate a slower internet connection to view the effect. Just open the Chrome Developer Tools and head over to the Network tab.

Network Tab

Change Online to either “Fast 3G” or “Slow 3G” and performing a hard reload should do the needful.

Closing in

Thank you for reading such a long article. No honestly, thanks a lot. If you’ve really liked this article then I’d request you to go ahead and implement this trick in your awesome react apps and feel free to clap and share this article with your peers.

Wishing you a wonderful day ahead !!