javascript - react lazyload,你们是怎么做的

Question

如题,项目中我们应该怎么做呢
有人能提供一点实际应用的思路吗

Answer 1

是要做脚本的延迟加载，还是图片类的延迟加载？

写了个简单的

'use strict';

let React = require('react');

// utils
let _ = require('underscore');
let StyleMarker = require('react-style-marker');

module.exports = React.createClass({

    getInitialState() {
        return {
            visible: false
        }
    },

    handleScrollInnter() {

        let coverDom = this.refs.preCoverDOM;
        // 加载界限中，额外提供的1000px
        let extraOffset = 1000;
        if (coverDom) {
            let bounds_ = this.refs.preCoverDOM.getDOMNode().getBoundingClientRect();

            if (bounds_.top <= (window.innerHeight + extraOffset)
                && bounds_.bottom > -extraOffset) {
                this.handleVisible();
                this.setState({visible: true});
            }
        }
    },

    handleVisible() {
        // 添加/移除事件全部使用捕获的模式
        window.removeEventListener('scroll', this.handleScroll, true);
        window.removeEventListener('resize', this.handleScroll, true);

        // 自定义事件
        if (this.props.selfDefinedEvent) {
            window.removeEventListener(this.props.selfDefinedEvent, this.handleScroll, true);
        }
    },

    componentDidMount() {
        this.handleScroll = _.throttle(this.handleScrollInnter, 200, {trailing: false});
        window.addEventListener('scroll', this.handleScroll, true);
        window.addEventListener('resize', this.handleScroll, true);

        // 自定义事件
        if (this.props.selfDefinedEvent) {
            window.addEventListener(this.props.selfDefinedEvent, this.handleScroll, true);
        }

        this.handleScroll();
    },
    componentDidUpdate: function () {
        if (!this.state.visible) this.handleScroll();
    },

    componentWillUnmount: function () {
        this.handleVisible();
    },

    render() {
        let url = this.props.url;
        let styleClass = this.props.styleClass;

        let height = this.props.height || 100;
        let width = this.props.width || 100;


        let T = StyleMarker.trans;
        T('myImageSize=width(' + width + ') + height(' + height + ')');

        // TODO : 添加默认图片显示
        return this.state.visible ? (
            <img src={url} className={styleClass || ''}/>
        ) : (
            <p>
                <p className='clear-both'></p>
                <p style={T('myImageSize')} className='clear-both' ref='preCoverDOM'> </p>
                <p className='clear-both'></p>
            </p>
        );
    }
});

react-style-marker部分是个测试的，可以根据需求移除掉

Answer 2

你想问的是不是react-router构建的单页应用如何实现子页面的按需加载啊？

Answer 3

我们项目中使用团队成员自己研发的 https://github.com/jasonslyvia/react-laz...