滾動時反應網格畫廊延遲加載

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