React 项目结构 + Js 实现方法助力图片懒加载，兼顾性能与体验

一、项目结构的优化

优化项目结构是实现图片懒加载和遮罩层的基石。合理划分项目文件夹和组件，可以确保代码的可维护性和可扩展性。

1. 创建项目目录

• 项目根目录：放置项目配置文件、脚本和其他全局资源
• src 目录：存放项目源代码，包括组件、样式和脚本
• node_modules 目录：存放第三方库和依赖项

2. src 目录下的组件划分

• Components 目录：放置可重用组件，如导航栏、页脚等
• Pages 目录：放置页面组件，如主页、关于页面等
• Images 目录：存放项目中使用的所有图像资源

二、实现图片懒加载

图片懒加载是一种优化图像加载的常见技术，可以显著提升页面加载速度，尤其是在图像数量较多的情况下。

1. 安装所需依赖

• npm install react-lazyload --save

2. 编写组件

• 在 Components 目录下创建 LazyLoad.js 文件，并添加以下代码：

import React, { forwardRef, useState } from "react";
import { LazyLoadImage } from "react-lazyload";

const LazyLoad = forwardRef(({ src, alt, ...rest }, ref) => {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <LazyLoadImage
      ref={ref}
      src={src}
      alt={alt}
      onLoad={() => setIsLoading(false)}
      {...rest}
    >
      {isLoading && <div className="image-loading" />}
    </LazyLoadImage>
  );
});

export default LazyLoad;

• 在 image-loading.css 文件中添加以下样式：

.image-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}

3. 使用组件

• 在需要使用图片懒加载的地方，直接使用 LazyLoad 组件即可。例如：

import LazyLoad from "./components/LazyLoad";

const MyComponent = () => {
  return (
    <LazyLoad src="image.jpg" alt="My Image" />
  );
};

三、添加遮罩层优化加载体验

遮罩层可以有效优化图片加载体验，在图片加载完成前显示占位符或加载动画，提升用户视觉感受。

1. 修改 LazyLoad 组件

• 在 LazyLoad.js 文件中，修改 LazyLoadImage 组件的属性，使其在加载完成前显示遮罩层。例如：

<LazyLoadImage
  ...
  placeholderSrc="placeholder.jpg"
/>

• 在 placeholder.jpg 文件中添加占位符图像，以确保在图片加载完成前有内容显示。

2. 使用动画效果

• 可以使用 CSS 动画或 JavaScript 动画库来实现图片加载时的动画效果，进一步提升用户体验。

结语

通过优化项目结构、实现图片懒加载并添加遮罩层，可以显著提升 React 项目的性能和用户体验。希望本指南能帮助您在项目中轻松实现这些优化，打造更加流畅、愉悦的用户交互体验。