javascript - 滚动时反应网格库延迟加载

Question

我正在使用 React 网格库（https://github.com/benhowell/react-grid-gallery）来显示图像，但我不能作为页面上的滚动用户延迟加载。

                  <Gallery
                    images={this.props.newExamples}
                    enableImageSelection
                    thumbnailImageComponent={ImageComponent}
                    rowHeight={this.props.newExamples[0].thumbnailHeight}
                    margin={10}
                    onSelectImage={(index, image) => this.onSelectImageNewExample(index, image)}
                  />

标签： javascriptreactjs

Answer 1

我在 thumbnailImageComponent 中使用了 react-lazy-load-image-component ，如下所示：

    class ImageComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render () {
        console.log(this.props.imageProps)
        return (
                <LazyLoadImage
                    height={this.props.imageProps.style.width}
                    width={this.props.imageProps.style.width} 
                    src={this.props.imageProps.src} 
                    />
        );
    }
}

使用ANimator120的功能组件进行编辑：

const ImageComponent = (props) => {
  const { imageProps } = props;

  return (
    <LazyLoadImage
      height={imageProps.style.width}
      width={imageProps.style.width}
      src={imageProps.src}
    />
  );
};