react图片懒加载

React图片懒加载是一种对网页性能优化的方式，通过延迟加载图片资源来提高页面加载速度，减轻服务器压力，节省流量。在React中，可以使用第三方库react-lazy-load-image-component来实现图片懒加载。首先，需要安装该组件，可以使用npm命令进行安装，例如：npm i --save react-lazy-load-image-component。然后，在React函数组件中，可以使用LazyLoadImage组件来实现图片懒加载。通过监听滚动事件，判断图片是否进入视图中，然后再加载图片。在组件的渲染时，添加对scroll事件的监听，并在销毁阶段取消监听，以减少页面负担。具体代码示例如下：

import React, { useEffect } from 'react';
import { LazyLoadImage } from "react-lazy-load-image-component";

export default function ImageLazyLoad() {
  const imgList = \[
    "https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg",
    "https://pic1.zhimg.com/v2-e915686432f3bb45dd43705ec445352d_r.jpg",
    "https://www.euweb.cn/wp-content/uploads/2016/12/302636-106.jpg",
    "https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg",
  \];

  useEffect(() => {
    const checkImages = () => {
      // 判断图片是否进入视图中，然后再加载图片
    };

    setTimeout(() => {
      checkImages();
    }, 1);

    window.addEventListener('scroll', checkImages);

    return () => {
      window.removeEventListener("scroll", checkImages);
    };
  }, \[\]);

  return (
    <div style={{ width: "60%" }}>
      {imgList.map((img) => (
        <LazyLoadImage
          src={img}
          width={600}
          height={400}
          alt="Image Alt"
        />
      ))}
    </div>
  );
}

在上述代码中，通过在组件的useEffect钩子中添加对scroll事件的监听，并在销毁阶段取消监听，实现了图片懒加载的效果。同时，使用LazyLoadImage组件来渲染图片，并设置图片的宽度、高度和alt属性。这样，在滚动页面时，只有当图片进入视图中时才会加载图片，从而提高页面加载速度。
#### 引用[.reference_title]
- *1* *2* [react 实现图片懒加载](https://blog.csdn.net/Kmnyed/article/details/130691665)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [React懒加载:页面多图片加载优化](https://blog.csdn.net/TwelveSpring/article/details/125300867)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]