react图片懒加载-webpack

// 此模块适用于webpack构建的项目

1, 下载安装懒加载模块

cnpm i react-lazyload --save

2, 在src/assets/目录下放入懒加载占位图 placeholder.gif

3, 在需要使用懒加载的组件中导入懒加载模块和占位图

import LazyLoad from 'react-lazyload';
import placeholder from "../../asset/placeholder.gif"

4, 在组件rander函数中创建占位图片标签img

var holderImg = <img src="{placeholder}" >

5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签

<LazyLoad placeholder={holderImg}>
<img src="{item.room_src}" alt="这是一个图片"> 
</LazyLoad >