Javascript 加载图像时如何显示微调器或进度条？

我正在制作react，next.js应用程序，在该应用程序上显示各种图像：

用户单击左侧列表中的项目，在右侧显示三幅图像。根据next.js图像组件显示图像：

            <Image
          src={visualizationData[0]}
          quality={50}
          alt="Zdjęcie oryginalne"
          width={600}
          height={600}
        />

所以它会返回如下结果：

一切都很好，但速度很慢，因为后端需要将.tif照片转换为.jpg，这需要3秒钟。我想为这3秒钟显示一个或类似于微调器的东西，而不是让用户使用旧的可视化效果

怎么做？我不知道如何检查照片是否已加载，因为我只是将URL传递给图像组件的

src

道具

下面是

getVisualizationData（modelName、pathAndPhotoName）

的代码：

---

它将路径转换为照片并以数组形式返回。

您可以创建一个isLoading布尔值。如果isLoading为true，则显示微调器。如果没有，则数据已被提取，您可以停止显示微调器并开始显示图片

请注意，关于getVisualizationData确切返回的内容，我没有足够的信息。但基本上，它应该返回一个用获取的值解析的承诺。因此，看看这段代码，获得想法并应用它

  const [isLoading, setIsLoading] = useState(false);
 
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
 
      const result = await getVisualizationData(props.history.model.name, props.history.dataLists[0].replace('img/', '')); //Please check this line    
      setVisualizationData(result);
      setIsLoading(false);
    };
    fetchData();
  }, []);

然后在组件中，可以在isLoading为true时渲染微调器。如果为false，则渲染要显示的内容：

return(
{isLoading ? (
        <SpinnerComponent />
      ) : (
        <div>
          //Render here your pictures
        </div>
      )}
)

返回(
{孤岛加载(
) : (
//在这里渲染你的图片
)}
)

谢谢，但getVisualizationData甚至不是一个异步函数—它只是将照片的路径转换为url端点—所以您的解决方案是否有效？我在问题中添加了getVisualization（）方法代码，您能检查一下吗？

  const [isLoading, setIsLoading] = useState(false);
 
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
 
      const result = await getVisualizationData(props.history.model.name, props.history.dataLists[0].replace('img/', '')); //Please check this line    
      setVisualizationData(result);
      setIsLoading(false);
    };
    fetchData();
  }, []);

return(
{isLoading ? (
        <SpinnerComponent />
      ) : (
        <div>
          //Render here your pictures
        </div>
      )}
)