Javascript 反应JS地图卡图像

当我通过自定义钩子从API获取imgs列表时，显示加载程序组件，然后显示映射列表。问题-卡片项目图像显示的时间不相同。

自定义挂钩：

import { useState, useEffect } from "react";

export default function useFetch(typeTabByPopular, tabListType) {
  const [list, setList] = useState("");
  const [page, setPage] = useState("1");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(
      `https://api.themoviedb.org/3/trending/${tabListType}/
      ${typeTabByPopular}?api_key=${process.env.REACT_APP_API_KEY}&&page=${page}`,
    )
      .then((response) => response.json())
      .then((data) => {
        setList(data);
        setLoading(false);
      });
  }, [tabListType, typeTabByPopular, page]);
  return { list, setPage, loading };
}

---

所有图像元素都有一个onLoad事件，您可以使用它来实现此目的

因为您有一个图像列表，所以您知道每页上应该有多少图像。 使用

setLoadedImages

将计数器

loadedImages

置于每个图像的onLoad上，将其提升1

---

直到计数器等于页面上的图像数，然后渲染加载程序，当计数器与图像数匹配时，渲染图像。

图像正在加载，因此您需要等待它，否则将生成骨架