显示加载指示器，直到图库中的所有图像都（完全）从 React 中的 API 加载（使用 Hooks）

Question

我正在学习 React 并且我正在尝试使用他们的 API 创建一个简单的站点，该站点基本上是一个 Giphy 搜索引擎。

到目前为止，我正在获取和显示数据（趋势 Giphy 图像）。 问题是我不喜欢我的加载指示器的工作方式。 它显示了一点，但当它消失时，(40) 个图像仍在容器中填充。

有没有办法让加载指示器只有在加载所有内容时才会消失？

<Loader>是我的加载指示器。 我也在使用一些 Reactstrap 组件。

这是我目前的 2 个组件：

应用程序.js

import React, { useState, useEffect } from 'react'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
import Loader from 'react-loader-spinner'
import Results from './Components/Results'
import { UncontrolledAlert } from 'reactstrap'



function App() {
    const [isLoading, setLoading] = useState(true)
    const [gifsData, setGifsData] = useState([])
    const [errorMessage, setErrorMessage] = useState('')

    useEffect(() => {
        const giphyTrending = async () => {
            await fetch(`https://api.giphy.com/v1/gifs/trending?api_key=OGINPHAsY1NNNhf6XIlpX1OygKXDFfXV&limit=50&rating=R`)
                .then(res => res.json())
                .then(data => {
                    setGifsData(data.data)
                    setLoading(false)
                })
                .catch(err => setErrorMessage(err.message))
        }
        giphyTrending()
    }, [])

    if (errorMessage) {
        return (
            <div>
                <UncontrolledAlert color="secondary">{errorMessage}</UncontrolledAlert>
            </div>
        )
    }

    return (
        <div className='App'>
            {isLoading ?
                <Loader className='loader' type="Circles" color="yellow" height={120} width={120} />
                :
                <Results isLoading={isLoading} gifsData={gifsData} />}
        </div>
    )
}

export default App

Results.jsx （不确定是否需要这个，但以防万一）

const Results = (props) => {
    return (
        <div className='gifsContainer'>
            {props.gifsData.map(gif => (
                <div key={gif.id}>
                    <CardImg className='gifs' src={gif.images.fixed_height_small.url} alt={gif.title} />
                </div>))}
        </div>
    )
}

export default Results

Answer 1

看看这个 SO 问题，您似乎可以为img提供一个onLoad道具（我猜这就是您在CardImg引擎盖下CardImg ）。 如果是这样，您可以让它们在加载后触发一个函数，跟踪父组件中的那些，并且当您从fetch中收到的图像数量与加载的图像数量相匹配时，那么您可以去掉加载指示器。

这是在做一些假设。 如果您希望我为您勾勒出该流程，请告诉我。

Answer 2

检查此链接，您可以保持状态计数并保证所有图像都通过点击 0 加载。因此 loading = loading.state 和 imageload.state.count != 0。

https://www.javascriptstuff.com/detect-image-load/

Answer 3

例如，我们定义一个计数器：

const [counter, setCounter] = useState(0);

在 CardImage 组件中，我们使用OnLoad函数道具在图像完全加载时更新计数器。 当 counter 不等于gifsData.length - 1 时，将显示 IndicatorView