Question

我正在显示其来源来自 URL 的图像。这些图像具有不同的大小。这些图像位于 A 0.0 0.1 1.0 [1.0, 1.1] 2.0 [1.0, 0.55] 2.6 [1.0, 0.4230769230769231] 3.0 0.1 3.4 [0.1, 0.3235294117647059] 4.0 1 4.5 2.1 中，它们具有响应性，并且为了使图像尽可能适合，它们的宽度为 100%。到目前为止，一切都很好。

问题是当加载图像时，因为它来自一个 URL，它可能需要一段时间，在加载它占用 0x0 像素之前，因此我的 div 不可见，这导致我显示问题，直到图像已加载。（你明白我的意思吗？）

事实上，最好的方法是拥有一个与要加载的图像大小相同的占位符。或者我想知道获取图像的大小然后构建div会更好吗？（但如何在渲染中做到这一点？）或者，我应该使用延迟加载组件吗？（目前，我还没有找到一个可以在加载图像之前获取图像大小的图像）。

Answer 1

这样的事情应该可以工作：html and body

export default function App() {
  const [isLoading, setIsLoading] = useState(true);

  function onLoad() {
    // delay for demo only
    setTimeout(() => setIsLoading(false), 1000);

   // setIsLoading(false)
  }

  return (
    <>
      <img
        alt="ad-img"
        width={300}
        src="https://via.placeholder.com/300x200/FF0000"
        style={{ display: isLoading ? "block" : "none" }}
      />
      <img
        alt="ad-img"
        width={300}
        src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1hIjBaj0A0XNB_xAozRAcFs6Gr0DQhWTGiQ&usqp=CAU"
        style={{ display: isLoading ? "none" : "block" }}
        onLoad={onLoad}
      />
    </>
  );
}

...我们正在显示 2 个图像，占位符和实际图像。在加载实际图像时，我们将显示占位符，加载后我们将隐藏占位符并显示实际图像。

反应：图像加载前图像大小问题

1 个答案: