延迟加载ReactJS呈现内容中的图像，视频和iframe [英] Lazy load images, videos, and iframes in ReactJS rendered content

问题描述

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

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.

我正在使用一系列技术来处理延迟加载的iframe，视频和图像，并且它在渲染的内容之外运行良好通过React。主要是自定义jQuery和 Lazy Load Anything 库。

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 Lazy Load Anything library.

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

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?

我尝试从componentDidMount触发它但这似乎不起作用，因为内容尚未放入DOM。

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.

我想我可以每隔 n 秒检查一次内容，但出于性能原因我想避免这种情况。

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

这是我的简化代码：

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

推荐答案

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

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 component, not from its parent.

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

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

https://github.com/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>);
    }
});

这篇关于延迟加载ReactJS呈现内容中的图像，视频和iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！