reactjs - 为什么这些图像会在屏幕上加载两次？

Question

我有一个 React 应用程序中的基本图像列表，延迟加载。一切正常，但是当我向上滚动到顶部时，一些图像会重新加载两次。似乎问题来自不透明动画。如何解决这个问题？加载图像后，它们应保留在屏幕上。

import React, {  useState } from "react";
import styled from "styled-components";

const Picture = styled.img<{ loaded: boolean }>`
  width:200px;
  height:200px;
  object-fit: cover;
  object-position: center;
  opacity: ${({ loaded }) => (loaded ? 1 : 0)};
  transition: opacity 1s;
`;

export default function Image({src}) {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(false);

  return (
      <Picture
        loading="lazy"
        src={error ? "error.png" : src}
        onLoad={() => setLoaded(true)}
        onError={() => setError(true)}
        loaded={loaded || error}
      />
  );
}

如果您想自己检查渲染，这里是一个沙箱：https ://codesandbox.io/s/busy-ardinghelli-z7pgv?file=/src/Image.tsx

谢谢！

标签： reactjsimagelazy-loading