前言

上篇文章一文学会图片加载失败时设置兜底图片意外的受到了众多小伙伴的点赞和收藏，令我很开心。但在实际使用过程中发现还是有一些场景没有覆盖到，因此有了这篇文章。

图片加载状态

众所周知，图片作为一种特殊的资源都是需要通过单独发起网络请求去获取的。而发请求的话就类似于一个Promise，它具有三种状态：Pending、fulfilled、rejected。因此相对应的，图片的加载状态也分为加载中、加载成功、和加载失败三种状态。

通常我们都只关注图片加载失败的场景，就像我上篇文章提到的那样。但当图片过大时或者在主要位置展示时，长时间的加载没有一个显示内容也会非常的难看。因此对于图片的loading状态也需要特殊处理。

所以针对图片的三种状态，不如将原有的图片标签替换为一个自定义的图片组件。

react图片组件

以react为例，代码也很简单。

import React, { FC, useRef, useEffect, memo } from "react";

interface ImageProps {
    pending: string; // 图片加载时的链接
    success: string; // 图片链接
    fail: string; // 图片出错时的链接
}

const Image: FC<ImageProps> = ({
    pending,
    success,
    fail
}) => {
    const imgRef = useRef<HTMLImageElement>(null);

    useEffect(() => {
        imageInit();
    }, []);

    function imageInit() {
        const img = document.createElement("img");

        img.src = success;
        img.onload = () => {
            if (imgRef.current) {
                imgRef.current.src = success;
            }
        };
        img.onerror = () => {
            if (imgRef.current) {
                imgRef.current.src = fail;
                imgRef.current.onerror = null;
            }
        };
    }

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

export default memo(Image);