时间戳

首页 > 解决方案 > React JS 地图卡片图像

javascript - React 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 };
}

标签： javascriptreactjs

解决方案

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

既然你有一张图片列表，那么你就知道每页应该有多少张图片。loadedImages在每个图像的 onLoad 上放置一个计数器，setLoadedImages用于将其提高 1。

直到计数器等于页面上的图像数量时才会渲染加载器，并且当它与图像数量匹配时才会渲染图像。

推荐阅读