Question

我在页面加载时有一个react组件渲染。内容包括许多富媒体，我只想在内容在屏幕上时延迟加载，然后在没有内容时卸载它。用户滚动时会加载更多内容。

我使用多种技术组合来处理延迟加载的iframe，视频和图片，并且它在通过React呈现的内容之外运行良好。主要是自定义jQuery和Lazy Load Anything库。

我的主要问题是，我无法使用延迟加载功能来触发刚放入dom的内容。一旦用户调整大小/滚动它就会起作用（我有一个适当触发的事件）。如何在内容可用时触发它？

我已尝试从componentDidMount触发它，但这似乎无法正常工作，因为内容尚未放入DOM中。

我想我可以每隔 n 秒检查一次内容，但出于性能原因我不想这样做。

这是我的简化代码：

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({
    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 (<div><EntriesList items={this.state.entryItems} /></div>);
    }
});

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

Answer 1

如果您尝试使用jquery插件，可能会以与React呈现的DOM不同步的DOM结束。同样在你的情况下，应该在EntriesList组件中调用延迟加载函数，而不是从其父组件中调用。

你可以使用一个非常简单的组件作为react-lazy-load：

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

或者从源代码中获取灵感来实现自己的灵感。

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>);
    }
});

Answer 2

尝试检查您的div父容器的滚动事件（您在App类上呈现的div：

var App = React.createClass({
    componentDidMount: 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>);
    }
});

Answer 3

延迟加载反应

组件可以懒散地加载依赖关系，而消费者不知道使用更高阶函数，或者消费者可以懒惰地加载其子代，而不会让孩子知道使用带有函数和模块集合的组件，或者两者的某种组合。

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

Answer 4

使用npm包react-lazy-load-image-component，你只需要使用<LazyLoadComponent>包装你想要延迟加载的组件，它就可以在没有任何其他配置的情况下工作。

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

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({
    componentDidMount: 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'));

免责声明：我是该套餐的作者。

延迟加载ReactJS呈现内容中的图像，视频和iframe

4 个答案: