如何实现图片懒加载，原生 + React 实现方式

前言

有时候列表存在许多图片，那么一次性加载会阻塞 http 请求，为了避免在可视窗口之外的元素进行不必要的图片加载，可以尝试使用懒加载进行优化。懒加载可以显著提高页面加载性能，特别是当页面包含大量图片时。为了实现延迟加载图片（也称为懒加载），可以使用 JavaScript 和 Intersection Observer API。

实现

步骤

HTML 结构：为每个图片元素设置一个占位符，并使用 data-src 属性存储实际的图片 URL。
CSS 样式：设置图片占位符的样式。
JavaScript：使用 Intersection Observer API 监控图片元素，当图片元素进入视口时，加载实际的图片。

代码示例

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lazy Load Images</title><style>.placeholder {width: 100%;height: 200px;background-color: #f0f0f0;display: flex;align-items: center;justify-content: center;color: #ccc;}</style>
</head>
<body><h1>Lazy Load Images Example</h1><div class="image-container"><img class="lazy" data-src="image1.jpg" alt="Image 1" class="placeholder"><img class="lazy" data-src="image2.jpg" alt="Image 2" class="placeholder"><img class="lazy" data-src="image3.jpg" alt="Image 3" class="placeholder"><!-- 添加更多图片 --></div><script>document.addEventListener("DOMContentLoaded", function() {const lazyImages = document.querySelectorAll('img.lazy');if ('IntersectionObserver' in window) {const lazyImageObserver = new IntersectionObserver(function(entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {const lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove('lazy');lazyImageObserver.unobserve(lazyImage);}});});lazyImages.forEach(function(lazyImage) {lazyImageObserver.observe(lazyImage);});} else {// Fallback for browsers that do not support IntersectionObserverlet lazyLoadThrottleTimeout;function lazyLoad() {if (lazyLoadThrottleTimeout) {clearTimeout(lazyLoadThrottleTimeout);}lazyLoadThrottleTimeout = setTimeout(function() {const scrollTop = window.pageYOffset;lazyImages.forEach(function(img) {if (img.offsetTop < (window.innerHeight + scrollTop)) {img.src = img.dataset.src;img.classList.remove('lazy');}});if (lazyImages.length == 0) {document.removeEventListener("scroll", lazyLoad);window.removeEventListener("resize", lazyLoad);window.removeEventListener("orientationChange", lazyLoad);}}, 20);}document.addEventListener("scroll", lazyLoad);window.addEventListener("resize", lazyLoad);window.addEventListener("orientationChange", lazyLoad);}});</script>
</body>
</html>

解释

HTML 结构：
- 使用 data-src 属性存储实际的图片 URL。
- 使用 class="lazy" 标记需要懒加载的图片。
CSS 样式：
- 设置图片占位符的样式，确保在图片加载前显示占位符。
JavaScript：
- 使用 IntersectionObserver 监控图片元素，当图片元素进入视口时，加载实际的图片。
- 如果浏览器不支持 IntersectionObserver，使用滚动事件和节流函数实现懒加载。

React 代码实例

代码结构

创建 React 组件

import React, { useEffect, useRef } from 'react';
import './App.css';const LazyImage = ({ src, alt }) => {const imgRef = useRef();useEffect(() => {const imgElement = imgRef.current;const handleIntersection = (entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove('lazy');observer.unobserve(lazyImage);}});};const observer = new IntersectionObserver(handleIntersection, {root: null, // 使用视口作为根rootMargin: '0px',threshold: 0.1 // 当至少 10% 的图片进入视口时触发});if (imgElement) {observer.observe(imgElement);}return () => {if (imgElement) {observer.unobserve(imgElement);}};}, []);return <img ref={imgRef} data-src={src} alt={alt} className="lazy placeholder" />;
};const App = () => {return (<div className="App"><h1>Lazy Load Images Example</h1><div className="image-container"><LazyImage src="https://via.placeholder.com/300" alt="Image 1" /><LazyImage src="https://via.placeholder.com/300" alt="Image 2" /><LazyImage src="https://via.placeholder.com/300" alt="Image 3" />{/* 添加更多图片 */}</div></div>);
};export default App;

添加 CSS 样式
在 App.css 文件中添加以下样式：

.placeholder {width: 100%;height: 200px;background-color: #f0f0f0;display: flex;align-items: center;justify-content: center;color: #ccc;
}

解释

LazyImage 组件：
- 使用 useRef 获取图片元素的引用。
- 使用 useEffect 在组件挂载时创建 IntersectionObserver 实例，并监控图片元素。
- 当图片元素进入视口时，加载实际的图片，并取消对该图片元素的监控。
App 组件：
- 渲染多个 LazyImage 组件，每个组件对应一张需要懒加载的图片。
CSS 样式：
- 设置图片占位符的样式，确保在图片加载前显示占位符。

调试步骤

检查图片元素是否被正确观察：
- 在 useEffect 中添加 console.log(imgElement)，确保图片元素被正确获取。
检查 IntersectionObserver 的回调：
- 在 handleIntersection 函数中添加 console.log(entries)，确保回调函数被正确调用。
检查图片元素是否进入视口：
- 确保页面布局正确，图片元素确实进入了视口。