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 -- 单个图片视图高度
posted @ 2020-04-02 12:00  每天都要进步一点点  阅读(9069)  评论(0)  编辑  收藏  举报