title: Lazy load images, videos, and iframes in ReactJS rendered content
body: <p>I have a react component rendering on page load. The content includes lots of rich media that I want to lazy load only when the content is on screen and subsequently unload it when it's not. More content is loaded as the user scrolls.</p>
  
  <p>I'm using a combination of techniques to handle lazy loading iframes, videos, and images and it works well outside of content rendered via React. Mostly custom jQuery and the <a href="https://github.com/emn178/jquery-lazyload-any" rel="nofollow">Lazy Load Anything</a> library. </p>
  
  <p>My main issue is that I can't get my lazy load function to trigger on content just placed into the dom. It works once the user resizes/scrolls (I have a events for this that are triggered appropriately). How do I get it to trigger when the content is available?</p>
  
  <p>I've tried triggering it from componentDidMount but this doesn't seem to work as the content has yet to be placed into the DOM.</p>
  
  <p>I suppose I could just check for content every <em>n</em> seconds but I'd like to avoid this for performance reasons.</p>
  
  <p>Here's my simplified code:</p>
  
  <pre><code>var EntriesList = React.createClass({
      render: function() {
          var entries = this.props.items.map(function(entry) {
              return (
                  &lt;div className="entry list-group-item" key={entry.id}&gt;
                      // lazy items video, image, iframe...
                      &lt;img src="1px.gif" className="lazy" datasource="/path/to/original" /&gt;
                      &lt;video poster="1px.gif" data-poster-orig="/path/to/original" preload="none"&gt;{entry.sources}&lt;/video&gt;
                  &lt;/div&gt;
              );
          });
  
          return(&lt;div&gt;{entries}&lt;/div&gt;);
      }
  });
  
  
  var App = React.createClass({
      componentDidMount: function() {
          $.get('/path/to/json', function(data) {
              this.setState({entryItems: data.entries});
          }.bind(this));
  
          // What do I put here to trigger lazy load? for the rendered content?
          myLazyLoad(); // does not work on the new content.
  
      },
      getInitialState: function() {
          return ({
              entryItems: []
          });
      },
      render: function() {
          return (&lt;div&gt;&lt;EntriesList items={this.state.entryItems} /&gt;&lt;/div&gt;);
      }
  });
  
  React.render(&lt;App /&gt;, document.getElementById('entries'));
  </code></pre>