react-lazyload 實現圖片懶加載

1.安裝模塊

yarn add react-lazyload

2.使用

import LazyLoad from 'react-lazyload';
...
<Grid
  data={categoryList}
  columnNum={2}
  square={false}
  hasLine={false}
  className="not-square-grid"
  itemStyle={{height: '100px'}}
  renderItem={(dataItem: any) => (
    <LazyLoad
      scrollContainer='.category_content'
      scroll={true}
      // offset={100}
      height={100}
      placeholder={<img width="100%" height="100%" src={DreamLogo} alt="logo"/>}
    >
      <img
        src={dataItem.cover}
        onClick={() => history.push(`/categoryPage/category/list?id=${dataItem.theme_id}`)}
        style={{ width: '100%' }}
        alt=""
      />
    </LazyLoad>
  )}
/>

3.說明

scrollContainer -- 滾動區域

scroll -- 是否監聽滾

offset -- 距離多少進行預加載

height -- 單個圖片視圖高度