Image Lazy Load Example

View the live example

In this example, we create a Medium inspired, image lazy loading effect. On initial page load, low resolution, blurry version of images are loaded. As the lo-res images scroll into visibility, the full resolution versions are automatically loaded.

This is accomplished by the use of two components. We use scroll-view to track the visibility of lazy-image components. lazy-image accepts 3 props:

• from - required. String, the URL of the image that's loaded initially, in our case the blurry image.
• to - required. String, the URL of the image that will be loaded when the component enters visibility in the viewport.
• visible - required. Boolean, passed in by scroll-view to denote component visibility and trigger loading the full resolution image.

In our case, we simply have two identical images that were created ahead of time and swapped on visibility. However, in practice you could automate this even further with a service like Cloudinary that allows for on-the-fly image manipulation based on the URL string. Using this method, you could upload the full resolution image to Cloudinary and generate a low resolution version via manipulating the URL to pass to the from prop. The to prop would just be the full resolution version.