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…