滚动时反应网格画廊延迟加载

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

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