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 -- 单个图片视图高度