Lazy image loading

Sometimes, you don't necessarily want an image to load at the exact moment that it's rendered. For example, you might be rendering something that's not yet visible on the screen. Most of the time, it's perfectly fine to fetch the image source from the network before it's actually visible. But if you're fine-tuning your application and discovering that loading lots of images over the network causes performance issues, you can lazily load the source.

I think the more common case in a mobile context is handling a scenario where you've rendered one or more images where they're visible, but the network is slow to respond. In this case, you will probably want to render a placeholder image so that the user sees something right away, rather than empty space.

To do this, we'll implement an abstraction that wraps the actual image that we want to show once it's loaded. Here's the code:

import React, { Component, PropTypes } from...