I have a react ponent 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.

I'm using a bination 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 Lazy Load Anything library.

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?

I've tried triggering it from ponentDidMount but this doesn't seem to work as the content has yet to be placed into the DOM.

I suppose I could just check for content every n seconds but I'd like to avoid this for performance reasons.

Here's my simplified code:

var EntriesList = React.createClass({
    render: function() {
        var entries = this.props.items.map(function(entry) {
            return (
                <div className="entry list-group-item" key={entry.id}>
                    // lazy items video, image, iframe...
                    <img src="1px.gif" className="lazy" datasource="/path/to/original" />
                    <video poster="1px.gif" data-poster-orig="/path/to/original" preload="none">{entry.sources}</video>
                </div>
            );
        });

        return(<div>{entries}</div>);
    }
});


var App = React.createClass({
    ponentDidMount: 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 (<div><EntriesList items={this.state.entryItems} /></div>);
    }
});

React.render(<App />, document.getElementById('entries'));

I have a react ponent 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.

I'm using a bination 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 Lazy Load Anything library.

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?

I've tried triggering it from ponentDidMount but this doesn't seem to work as the content has yet to be placed into the DOM.

I suppose I could just check for content every n seconds but I'd like to avoid this for performance reasons.

Here's my simplified code:

var EntriesList = React.createClass({
    render: function() {
        var entries = this.props.items.map(function(entry) {
            return (
                <div className="entry list-group-item" key={entry.id}>
                    // lazy items video, image, iframe...
                    <img src="1px.gif" className="lazy" datasource="/path/to/original" />
                    <video poster="1px.gif" data-poster-orig="/path/to/original" preload="none">{entry.sources}</video>
                </div>
            );
        });

        return(<div>{entries}</div>);
    }
});


var App = React.createClass({
    ponentDidMount: 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 (<div><EntriesList items={this.state.entryItems} /></div>);
    }
});

React.render(<App />, document.getElementById('entries'));

• javascript
• jquery
• reactjs

4 Answers 4

With the npm package react-lazy-load-image-ponent, you just have to wrap the ponents that you want to lazy load with <LazyLoadComponent> and it will work without any other configuration.

import { LazyLoadComponent } from 'react-lazy-load-image-ponent';

var EntriesList = React.createClass({
    render: function() {
        var entries = this.props.items.map(function(entry) {
            return (
                <LazyLoadComponent>
                    <div className="entry list-group-item" key={entry.id}>
                        // lazy items video, image, iframe...
                        <img src="1px.gif" className="lazy" />
                        <video poster="1px.gif" data-poster-orig="/path/to/original" preload="none">{entry.sources}</video>
                    </div>
                </LazyLoadComponent>
            );
        });

        return(<div>{entries}</div>);
    }
});


var App = React.createClass({
    ponentDidMount: function() {
        $.get('/path/to/json', function(data) {
            this.setState({entryItems: data.entries});
        }.bind(this));

    },
    getInitialState: function() {
        return ({
            entryItems: []
        });
    },
    render: function() {
        return (<div><EntriesList items={this.state.entryItems} /></div>);
    }
});

React.render(<App />, document.getElementById('entries'));

Disclaimer: I'm the author of the package.

If you are trying to use the jquery plugin you may end with a DOM out of sync with that rendered by React. Also in your case the lazy load function should be called in the EntriesList ponent, not from its parent.

You could use a very simple ponent as react-lazy-load:

https://github./loktar00/react-lazy-load

or just take inspiration from its source code to implement your own.

var EntriesList = React.createClass({
    render: function() {
        var entries = this.props.items.map(function(entry) {
            return (
                <div className="entry list-group-item" key={entry.id}>

                    // lazy items video, image, iframe...
                    <LazyLoad>
                       <img src="1px.gif" datasource="/path/to/original" />
                       <video poster="1px.gif" data-poster-orig="/path/to/original" preload="none">{entry.sources}</video>
                    </LazyLoad>

                </div>
            );
        });

        return(<div>{entries}</div>);
    }
});

Try to check on scroll event to your div parent container (the div that you render on App class:

var App = React.createClass({
    ponentDidMount: function() {
        $.get('/path/to/json', function(data) {
            this.setState({entryItems: data.entries});
        }.bind(this));
    },

    myLazyLoad: function(e) {
        // here do actions that you need: load new content, do ajax request, ...
        // example: check you scrolling and load new content from page 1, 2, 3 ... N
        var self = this;
        $.get('path/to/json/?page=N', function(data) {
            self.setState({entryItems: data.entries});
        });
    },

    getInitialState: function() {
        return ({
            entryItems: []
        });
    },
    render: function() {
        return (<div onScroll={this.myLazyLoad}><EntriesList items={this.state.entryItems} /></div>);
    }
});

Lazy Loading React

A ponent can lazily load dependencies without its consumer knowing using higher order functions, or a consumer can lazily load its children without its children knowing using a ponent that takes a function and collection of modules, or some bination of both.

https://webpack.js/guides/lazy-load-react/