Lazy Loading Images in React + CSS3 Transitions

Completed ImageLoader component code included

Lazy loading and image state handling with components is one of those times where you ask why was it not done this way before? What this article will cover is how to handle image loading in React with the following topics:

• Installing react-lazy-load to handle lazy content loading.

The React Lazy Load package consists of 1 component that you use in React to wrap around content you wish to load only when you scroll to it. We can define offsets, both vertical and horizontal, as well as configure throttling and onContentVisible handlers.

• Creating an image loader component we will name ImageLoader to handle each image state. Why? react-lazy-load does not handle transition animations when content is loaded — instead the content just pops on the screen. Not very elegent. But that’s ok, react-lazy-load can focus on improving its loading offerings, and we can focus on ways to elegantly introduce content.
• Creating custom CSS3 animations for content introductions and applying them to the ImageLoader component. In reality react-lazy-load can handle any content, not just images. In addition any content can have a loading handler, not just images. So although this article focuses on image loading, you can apply the techniques here to almost any HTML markup.

React Lazy Load

The react-lazy-load package is hosted on npmjs and the following url:
https://www.npmjs.com/package/react-lazy-load

This 6kb minified package is rather popular; not reaching the heights of giants like Redux, but it has recently hit 90k weekly downloads and at the time of writing is sitting on 82k weekly.

React Lazy Load is another page load speed gem

Loading speed, as well as the perception of loading speed, is a vital component of any web app, especially for mobile users. So we as developers are constantly looking for ways to speed up the experiences we create. As a specialisation I have personally, any technique that speeds up a browsing experience is an exciting concept that changes the game of your app, whether it be…