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

Question

我正在学习 React，我正在尝试使用他们的 API.

制作一个基本上是 Giphy 搜索引擎的简单网站

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

有什么方法可以让加载指示器只在所有内容加载完毕后消失？

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

这是我目前的 2 个组成部分：

App.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

看着看起来你可以为 img 提供一个 onLoad 道具（我猜这就是你在 CardImg).如果是这样，您可以让它们中的每一个在加载后触发一个函数，跟踪父组件中的那些，以及当您从 fetch 收到的图像数与图像数匹配时loaded，那么就可以去掉loading indicator了。

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

Answer 2

检查这个 link 你可以保持状态计数并保证所有图像都通过点击 0 加载。所以加载 = loading.state 和 imageload.state.count != 0.

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

Answer 3

比如我们定义一个计数器：

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

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

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

Display loading indicator until all the images in a gallery are (fully) loaded from an API in React (using Hooks)

loading

indicator

fetch

reactjs

react-hooks