图片的懒加载

实现思路：

• 利用浏览器提供的 IntersectionObserver，监听图片元素是否进入可视区域，进入后才真正去设置图片元素的 src 属性进行图片加载

IMG 组件js 文件

import classnames from 'classnames'
import { useEffect, useRef, useState } from 'react'
import Icon from '../Icon'
import styles from './index.module.scss'

const Image = ({ className, src, alt }) => {
  const imgRef = useRef(null)
  // 控制是否在加载
  const [loading, setLoading] = useState(true)
  // 控制是否加载失败
  const [error, setError] = useState(false)

  // 加载成功
  const onLoad = () => {
    setError(false)
    setLoading(false)
  }
  const onError = () => {
    setLoading(false)
    setError(true)
  }
  useEffect(() => {
    // 监听图片
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      if (isIntersecting) {
        // 图片在可视区
        imgRef.current.src = imgRef.current.dataset.src
        // 取消监听
        observer.unobserve(imgRef.current)
      }
    })
    observer.observe(imgRef.current)
  }, [])
  return (
    <div className={classnames(styles.root, className)}>
      {/* 加载中 */}
      {loading && (
        <div className="image-icon">
          <Icon type="iconphoto" />
        </div>
      )}

      {/* 加载出错时显示的内容 */}
      {error && (
        <div className="image-icon">
          <Icon type="iconphoto-fail" />
        </div>
      )}

      <img
        alt={alt}
        ref={imgRef}
        data-src={src}
        onLoad={onLoad}
        onError={onError}
      />
    </div>
  )
}

export default Image

IMG 组件scss文件

.root {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  :global {
    img {
      display: block;
      width: 100%;
      height: 100%;
    }

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

    .icon {
      color: #dcdee0;
      font-size: 32px;
    }
  }
}

使用方法 ：

将js文件和css文件放入components组件中 

在需要用到图片懒加载的页面中   导入IMG组件  替换img标签就可以使用  前提是使用hooks 和函数式编程