现代网站通常需要加载许多图片，这些图片会占用大量带宽，导致用户体验变差。为了优化性能，可以使用图片懒加载技术。懒加载使得图片在视口中可见时再加载，而不是一开始就全部加载。在这篇文章中，我们将介绍如何使用 React 实现图片懒加载的方法。
懒加载的优点
懒加载可以提高性能，减少页面加载时间。当网页包含大量图片时，懒加载可以显著减少带宽消耗，用户也会感受到更快的页面响应时间。此外，懒加载还可以避免页面文档流因为图片高度未知而产生的跳动问题。
实现图片懒加载的方法
实现图片懒加载有许多方法，可以使用第三方库如 react-lazyload 或手动实现。我们将介绍手动实现的方法。
首先，我们需要定义一个组件 LazyImage。这个组件接收图片的 src 属性和加载时渲染的占位符。当图片进入视口时，组件会将 src 属性设置为图片 URL。
-- -------------------- ---- -------
------ ------ - ------- --------- - ---- --------
-------- ----------- ---- ------------ ------- -- -
----- --- - ---------
------------ -- -
----- -------- - --- ---------------------
--------- -- -
-- ---------------------- -
--------------- - -------------------------
---------------------------------
-
--
-
----------- ---- --- ----- -----
-
--
------------------------------
------ -- -- -
--------------------------------
--
-- ----
------ ---- --------- ----------------- -------------- --------- ---
-
------ ------- ----------在这个组件中，我们使用 useRef 来获取 DOM 节点的引用，然后使用 useEffect 监听节点是否进入视口。当节点进入视口时，我们将 src 属性设置为图片 URL。
我们还使用了 data-src 属性保存实际的图片 URL，而 src 属性则设置为占位符。这个占位符可以是一个空白的像素或半透明的灰色图片。
最后，我们将 img 元素的 ref 属性设置为 ref 对象，使得组件能够访问该元素的 DOM 引用。我们还将 placeholder 和其他属性传递给 img 元素，以便灵活使用。
使用 LazyImage 组件
现在，我们可以在其他组件中使用 LazyImage 组件了。假设我们有一个图片列表组件如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- --------------
-------- ----------- ------ -- -
------ -
----
----------------- ------ -- -
--- ------------
---------- --------- ----------------------------- --
-----
---
-----
--
-
------ ------- ----------在这个组件中，我们遍历图片数组并展示每张图片。使用 LazyImage 组件替换 img 元素后，我们可以看到图片在加载时显示了占位符，而在进入视口时才加载真实图片。
总结
图片懒加载是提高网站性能的重要技术之一。在 React 中实现图片懒加载可以通过手动编写代码或使用第三方库轻松实现。手动实现可以更好地了解原理，实现灵活性更高。我们刚刚介绍的方法可以作为懒加载的实现参考，在实践中应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465dcb5968c7c53b0686fb5