// 此模块适用于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 >
该文章介绍了如何在Webpack构建的React应用中实现图片懒加载。首先,通过cnpm安装react-lazyload库;其次,在src/assets目录下放置占位图。然后,在需要懒加载的组件中导入该库和占位图。接着,在render函数中创建占位图片,并在需要懒加载的图片外层包裹LazyLoad组件,设置占位图属性。这样,图片将在进入视口时才进行加载。
716

被折叠的 条评论
为什么被折叠?



