Lazy Image - React JS (код js, не используйте библиотеку) - PullRequest
Новая
       8

Lazy Image - React JS (код js, не используйте библиотеку)

0 голосов
/ 15 октября 2018

Я работаю над созданием Lazy Image Component, который загружает изображения только при прокрутке к ним.В моем компоненте я поместил тег img в тег div На componentWillMount () - я установил значение атрибута src в data-src и установил src = ''.Таким образом, я могу сохранить ссылку на изображения и выгрузить их.Каждое событие «У меня есть событие прокрутки» определяет, прокручивает ли пользователь эту позицию или нет, и устанавливает для data-src значение src.Я хочу установить событие div onscroll вместо события окна, потому что я хочу повторно использовать этот компонент на разных страницах, но он не работает.Пожалуйста, посмотрите Спасибо! 

class LazyImage extends Component {
    constructor(props) {
        super(props);       

        this.state = {
            divId: '',
            properties: {...this.props}
        };
    }

    componentWillMount() {       
        var newProperties = this.state;
        newProperties.properties["data-src"] = newProperties.properties["src"];
        newProperties.properties["src"] = "";
        var divId = newProperties.properties.id;
        delete newProperties.properties.id;

        this.setState ({
            divId: divId,
            properties: newProperties.properties
        });
    }
    componentDidMount() {
        var idElement = '' + {...this.state}.divId;
        document.getElementById(idElement).onscroll = this.OnScroll();
    }
    componentWillUnmount() {
        var idElement = '' + {...this.state}.divId;
        //document.getElementById(idElement).removeEventListener('scroll', this.OnScroll);
    }
    OnScroll = function() {
        return function() {
            var idElement = '' + {...this.state}.divId;
            var imgDiv = document.getElementById(idElement);
            console.log(idElement);
            if (imgDiv != null)
            {
                var img = imgDiv.getElementsByTagName('img')[0];
                
                if (img!= null && img.offsetTop != null &&
                    img.offsetTop < (window.innerHeight + window.pageYOffset))
                {
                    img.src = img.dataset.src;
                }
            }
        }
    }

    render() {
        var idElement = '' + {...this.props}.id;
        var heightDiv = {...this.props}.height;
        var widthDiv = {...this.props}.width;

        return(
            <div id={idElement} style={{height: heightDiv, width: widthDiv}}> 
                <img {...this.state.properties}/>
            </div>
        );
    }
}
...