当前位置：首页 > article >正文

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

article 2024/11/1 22:40:07

前言

有时候列表存在许多图片，那么一次性加载会阻塞 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 IntersectionObserver
        let 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)，确保回调函数被正确调用。
检查图片元素是否进入视口：
- 确保页面布局正确，图片元素确实进入了视口。