react图片预加载

道阻且长，行而不辍，未来可期

图片预加载的原理：new一个image对象，用这个对象加载图片，等这个对象将这个图片请求完后，再将这个图片放入原本应该放置的位置

代码如下：

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

const ImagePreloader = ({ src }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
  	//new一个image对象，用这个对象加载图片
    const image = new Image();
    image.src = src;

	//图片加载完成
    image.onload = () => {
      setIsLoading(false);
    };

    //图片加载错误
    image.onerror = () => {
      setIsLoading(false);
      setIsError(true);
    };
   
    return () => {
      // 清除事件处理程序以避免内存泄漏
      image.onload = null;
      image.onerror = null;
    };
  }, [src]);

  return (
    <div>
      {isLoading ? (
        <div>Loading...</div> // 可根据需求自定义加载时的显示内容
      ) : isError ? (
        <div>Error loading image</div> // 图片加载错误时的显示内容
      ) : (
        <img src={src} alt="Preloaded" />//等图片加载完成后，再把图片赋值给组件中的img
      )}
    </div>
  );
};

export default ImagePreloader;

骨架屏

图片预加载的时候，可以使用骨架屏做加载效果
使用padding-top:100%给图片的高度做占位
简单的骨架屏效果

  .imgLoading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(190, 190, 190, 0.2) 25%,
        rgba(129, 129, 129, 0.24) 37%,
        rgba(190, 190, 190, 0.2) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
  }

  @keyframes skeleton-loading {
    0% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0 50%;
    }
  }