Image.js

(function() {
    'use strict';

    var React = require('react/addons');
    var utils = require('../../javascripts/utils');

    var Image = module.exports = React.createClass({
        getInitialState : function() {
            return {
                imageShown : false
            };
        },

        getDefaultProps : function() {
            return {
                alt                   : '',
                className             : '',
                hideDefaultBackground : false
            };
        },

        componentDidMount : function() {
          //When tab component changes data prop, component do get mounted
            if(this.props.useLazyLoad) {
                window.addEventListener('scroll', this.revealImage, false);
                window.addEventListener('resize', this.revealImage, false);

                this.revealImage();
            } else {
                //Else just go ahead and load image
                this.loadImage();
            }
        },

        componentWillUnmount : function() {
            window.removeEventListener('scroll', this.revealImage);
            window.removeEventListener('resize', this.revealImage);
        },

        componentShouldUpdate : function(nextProps) {
            return nextProps.src !== this.props.src;
        },

        revealImage : function() {
            //If image is visible inside viewport and its image has never been loaded
            if(!this.state.imageShown && utils.elementVisibleInViewport(this.getDOMNode())) {
                //Remove monitoring event, revealImage only performs one successful run
                window.removeEventListener('scroll', this.revealImage);
                window.removeEventListener('resize', this.revealImage);

                //Load it
                this.loadImage();
            }
        },

        loadImage : function() {
            var self = this;

            //Define elements
            var $imgElem = document.createElement('img');
            var $thisElem = self.getDOMNode();
            var $thisImgElem = $thisElem.querySelector('img');

            //Load image using dummy image element
            $imgElem.setAttribute('src', self.props.src);

            $imgElem.onload = function() {
                self.setState({imageShown : true});
                $thisImgElem.setAttribute('src', self.props.src);

                // Directly changing setAttribute do not work
                setTimeout(function() {
                    if(self.props.hideDefaultBackground) {
                        $thisElem.setAttribute('style', 'background: none;');
                    }

                    $thisImgElem.setAttribute('style', 'opacity: 1;');
                }, 0);
            };
        },

        render : function() {
            var className = this.props.className + ' cImage';

            return (
                <div className={className}>
                    <img alt={this.props.alt} />
                    {this.props.children}
                </div>
            );
        }
    });
})();

Page Structure

<Tabs />
<ResultList>
  <OneResult>
    <Image />
  </OneResult>
</ResultList>