var ImageComponent = React.createClass({

  getInitialState: function() {

    return {

      loaded: false,

    };

  },

​

  onImageLoad: function() {

    if (this.isMounted()) {

      this.setState({ loaded: true });

    }

  },

​

  componentDidMount: function() {

    var imgTag = ReactDOM.findDOMNode(this.refs.img);

    var imgSrc = imgTag.getAttribute('src');

    var img = new window.Image();

    img.onload = this.onImageLoad;

    img.src = imgSrc;

  },

​

  render: function() {

    var { className, ...props } = this.props;

    var rootClassName = className ? className + ' image' : 'image';

    if (this.state.loaded) {

      rootClassName += ' image-loaded';

    }

    return <img ref="img" {...props} className={rootClassName} />;

  }

});

​

ReactDOM.render(

  <ImageComponent src="http://voices.nationalgeographic.com/files/2013/04/NationalGeographic_1467467.jpg" width="500" />,

  document.getElementById('container')

);