Now let’s take a look at our IronImage component code.

As you can see the component is really nothing special, it’s simple and straightforward. Let’s go through the logic.

First we import the React stuff and styles for our component (“IronImage.css” — we’ll take a look at that after we go through the logic) then we create the component by extending React’s component.

In our constructor call we initialize ironImageHd we need it to hold a reference of the element in which we’re going to render our main image when it’s done loading.

Let’s skip the code in componentDidMount for now and go to our render function.

Our render function displays 2 images

I use div’s with background-image’s because I think they’re easier to work with and are more consistent than img tags but you can get the same functionality with img tags as well

We get the preload image as a prop and set the background of the preload element to display it. Now we’re displaying the blurred version of our main image. Neat.

The second image is a bit different.

Since our main image isn’t ready to be displayed immediately we can’t set the background to the full size image.

What we can do is get the reference to the element ( ref={...} ) and when we have the full size image we can then set the background image and fade it in.

If you want to know more about Reacts ‘ref’ you can find more info here Link

Now for the fun part!

In our componentDidMount function we create a new Image; we set its src to the full size image src that we got from props and we add a callback for when the image is done loading.

After the image is done loading we set the background image of ironImageHd element and we tell it to fade in using css; now is a good time to take a look at our “IronImage.css” file: