React+Hooks针对图片实现懒加载和预加载，性能优化

我们的产品上线后，用户在访问网站时往往都希望页面能够快速响应，加载速度越快则用户的体验也就越好，反之则用户的满意度会下降，同时也会影响品牌形象

针对图片体积过大的问题，我们可以采用图片懒加载和预加载来进行优化。下面分别介绍几种实现方式，原生方法和使用插件实现，非常简单

图片懒加载：

图片懒加载是指在页面滚动到可见区域时再进行图片加载，而不是在一开始就加载所有的图片。这样可以减轻页面初次加载时的请求压力，提升页面加载速度。

代码如下：

import React, { useRef, useEffect, useState } from 'react';

const LazyLoadImage = ({ src, alt }) => {
  const [imageSrc, setImageSrc] = useState('');
  const imgRef = useRef(null);

  useEffect(() => {
    let observer;
    if (imgRef.current) {
      observer = new IntersectionObserver(
        ([entry]) => {
          // 当图片进入可视区域时，设置图片地址进行加载
          if (entry.isIntersecting) {
            setImageSrc(src);
            observer.unobserve(imgRef.current);
          }
        },
        {
          rootMargin: '0px 0px 200px 0px', // 可视区域的边距设置为200px
        }
      );
      observer.observe(imgRef.current);
    }
    return () => {
      if (observer && observer.unobserve) {
        observer.unobserve(imgRef.current);
      }
    };
  }, [src]);

  return <img ref={imgRef} src={imageSrc} alt={alt} />;
};

export default LazyLoadImage;

然后在需要的模块下引入：

import LazyLoadImage from './components/LazyLoadImage';

const App = () => {
  return (
    <div>
      <LazyLoadImage src="图片路径/200/300" alt="lazy load image" />
    </div>
  );
};

图片预加载

图片预加载是指在页面加载时预先下载图片，这样用户在需要加载图片时就无需再进行网络请求。这样可以提升用户体验，减少页面加载时间

不多bb上代码：

import React, { useEffect } from 'react';

const PreloadImage = ({ src, alt }) => {
  useEffect(() => {
    const img = new Image();
    img.src = src;
  }, [src]);

  return <img src={src} alt={alt} />;
};

export default PreloadImage;

组件引用：

import PreloadImage from './components/PreloadImage';

const App = () => {
  return (
    <div>
      <PreloadImage src="图片路径/200/300" alt="preload image" />
    </div>
  );
};

以上就是采用图片懒加载和预加载来进行优化的代码实现。注意，在实际项目中可能需要对图片进行压缩、裁剪等处理，以进一步减小图片体积。

懒加载和预加载还有对应的插件可以实现

图片懒加载（react-lazyload插件）

针对 React Hooks 项目的图片懒加载实现，可以使用 react-lazyload 插件。这个插件可以很方便地实现图片懒加载功能，只需要在图片标签上添加 data-src 属性即可，不多bb上码：

下载 "react-lazyload"   插件

import React from 'react';
import LazyLoad from 'react-lazyload';

function MyComponent() {
  return (
    <div>
      <LazyLoad>
        <img src="" data-src="图片路径" />
      </LazyLoad>
    </div>
  );
}

这就完了，是不是很简单哈哈哈

图片预加载（react-image-preloader）

先下载插件

import React from 'react';
import PreloadImage from 'react-image-preloader';

function MyComponent() {
  return (
    <div>
      <PreloadImage src="图片路径" />
    </div>
  );
}

以上就是前端项目对于大批量的图片加载的优化方案，前端的性能优化其实是一个很好的习惯，减少浪费的资源，降低维护成本，提升名次，优化开发流程，进一步增强了项目产品的竞争力，有需要的朋友可以试一试