如何显示骨架加载直到图像完全渲染？

Question

我正在使用 react-loading-骨骼 这是我的代码（简化）：

const [image, setImage] = useState("");

const { isLoading } = useQuery(
    ["getImage"],
        async () => {
            await axios.get(someurl).then(res => {
                let theimage = res.data.image;
                if (theimage != "" && theimage != null) {
                    setImage(theimage)
                }
            })
        }
    );

return (
    <>{showLoading ? <Skeleton /> : <img src={image} />}</>
)

问题是从骨架切换到图像时的间隙（跳跃、移位……）。
看正文。它从“正在加载”变为“已加载！”

imageFromState

加载后，但需要一些时间才能显示图像。

有没有办法查看图像是否已完全加载和渲染，然后仅从骨架切换到图像？

（我知道我可以设置默认图像 src 并给容器一个固定的高度，这样它就不会移动，但我想显示骨架动画，直到图像完全可见）

Answer 1

我认为带有状态的 onload 函数也可以工作，骨架组件需要一些 css 属性或其内置设置。