Contact Us

React Image Lazy Load Component Revisited

A long a$$ time ago I created a simple React component that would lazily load an image and while it’s busy loading an image it would show a placeholder and wrote a tutorial how I did it. It is inspired by Polymer’s iron-image and a neat little trick how to transition from placeholder to loaded image.


The Magic

While playing around with Polymer (shameless LINK to another article I wrote) I learned that you can make a pretty cool “Blur Up” animation by taking the image you want to show, scaling it down to 1% of its width and height, using that as the placeholder and when the original size image is done loading you fade it in over the placeholder.

This creates an effect that looks like a blurred image hinting what it’s supposed to show suddenly sharpening to reveal the original image.

Sweet!


The Reaction

He he… see what I did there? The title is The Reaction and we’re talking about a React component! …I’m sorry you had to read that.

When I released my component into the wild I thought it wouldn’t be interesting to a lot of people since it’s a relatively basic component but to my surprise the interest for my component started growing and growing.

Thanks React community! Appreciate it!

The article I wrote keeps getting views and claps and according to medium statistics the activity is coming mostly from google search!

It made me really happy that I found a topic that continues to interest the React dev community and that I offered a possible solution to a problem as well as shared some of my knowledge.


The Realization

Looking at everything that’s happening something dawned on me…

While the article explaining the concept behind image lazy load and the neat trick I learned from Polymer is cool, the component it self sucked big time.

That’s why I decided to rework the component and publish it on npm as a library!


The Good Stuff

If you’re lookin’ for that sweet sweet component to use in your sweet sweet project then head on over to sweet sweet npm and install it (sweet sweet LINK)

If you’re looking for the Github page you can find it here (LINK)

Before you go…

If you enjoyed reading this post please share it. You should check out our other publications, you might like them too! We write from time to time about software development, tips and tricks, and how to become a better developer and business person in general. Join us on the journey of constant improvement!

Follow us on Facebook, Twitter, LinkedIn, Medium or DEV.to.

Bojan Gvozderac photo

Bojan Gvozderac

Bojan is a highly driven software developer with a burning passion for all things related to web development. With over 14 years of software development experience out of which 11 in web development using JavaScript, React, Angular 2+, CSS, SCSS, Node.js and GraphQL to name a few, Bojan always strives to go the extra mile and deliver quality software solutions.

Powered by an API first CMS.

We collect information about how our Users use and interact with the Site. This may include the pages Users visit most often and when and where Users get error messages. We use these “session state cookies” to help us improve our Site and Services. Blocking or deleting these cookies will not prevent the Site from working.

OK, close this

We collect information about how our Users use and interact with the Site. This may include the pages Users visit most often and when and where Users get error messages. We use these “session state cookies” to help us improve our Site and Services. Blocking or deleting these cookies will not prevent the Site from working.

OK, close this