什么是图片懒加载
图片懒加载指的是当页面滚动到相应图片的位置时，才开始加载该图片，而不是一开始就加载所有图片。这种方式可以减少页面加载时间，提升用户体验。在 React 项目中，我们可以使用一些插件或自己手写代码来实现图片懒加载。
使用 React-lazyload 插件实现图片懒加载
React-lazyload 是一个常用的图片懒加载插件，可以轻松地实现图片懒加载，具体操作如下：
安装 React-lazyload 插件
npm install react-lazyload --save
引入组件并使用
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ----------------- ----- --- - -- -- - ----- --------- ------------- ---- --------------------- ---------------------------- -- ----------- ------ -- ------ ------- ----这里的 height 属性是指图片进入视口后再加载，可以自己设置。
手写代码实现图片懒加载
我们也可以手写代码来实现图片懒加载的效果，具体步骤如下：
给需要懒加载的图片设置默认背景图
在实际项目中，我们可能需要使用一些占位符图片，比如默认的灰色图片，来替换未加载的图片，防止页面出现空白。我们可以通过 CSS 来设置默认背景图：
.lazy-img { background: url(default.jpg) center center no-repeat; width: 100%; height: 100%; }在组件的 componentDidMount 生命周期函数中实现图片懒加载
-- -------------------- ---- ------- ------ ----- ---- -------- ----- --- ------- --------------- - ------------------- - ----- --- - -------------- ----- ------------ - ------------------- --------------------------------- -- -- - ----- --------- - -------------------------------- -- ---------- - ------------- - ------- - ---------------- - --- - -------- - ------ - ----- ---- --------- -------------------- -------------------------- ---------------------------- -- ------ -- - - ------ ------- ----在这个例子中，我们获取了屏幕高度，当图片进入屏幕可视区域时，将图片的 data-src 属性替换为 src 属性，从而实现懒加载图片。
总结
图片懒加载是一种提高页面性能的方式，可以避免图片一开始就加载浪费资源和时间的情况。在 React 项目中，我们可以使用插件 React-lazyload，也可以手写代码来实现。无论是哪种方式，都需要在实际项目中考虑图片的默认背景图和具体的实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64719a26968c7c53b0f7ac0d