反应：图像加载时显示加载微调器

Question

我有一个React应用，可以调用useEffect我的API，该API返回URL列表以用作imy图像src。

我react-loader-spinner用来显示图像加载时的加载微调组件。

我有一个loading变量useState来确定图像是否正在加载。

我无法弄清楚如何停止显示正在加载的微调器，并在它们全部加载后显示图像。

这是我的代码：

Photos.jsx

import React, { useState, useEffect, Fragment } from 'react'
import Loader from 'react-loader-spinner';
import { getAllImages } from '../../services/media.service';
import Photo from '../common/Photo';

const Photos = () => {
  const [photos, setPhotos] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
      setLoading(true);
      getAllImages()
        .then(results => {
          setPhotos(results.data)
          console.log(results.data)
        })
        .catch(err =>{
          console.log(err)
        })
  }, [])

  const handleLoading = () => {
    setLoading(false)
  }

  return ( 
    <Fragment>
      <div className="photos">
          { loading ? 
            <Fragment>
              <Loader
                height="100"    
                width="100"
              />
              <div>Loading Joe's life...</div>
            </Fragment>
            :
            photos.map((photo, index) => (
                index !== photos.length - 1 ? 
                <Photo src={photo.src} key={photo.id} /> :
                <Photo src={photo.src} key={photo.id} handleLoad={handleLoading}/>
            ))
          }
      </div>
    </Fragment>
   );
}

export default Photos;

Photo.jsx

import React from 'react'

import './Photo.css';

const Photo = (props) => {
  return ( 
    <div className="photo">
      <img src={props.src} alt={props.alt} onLoad={props.handleLoad}/>
      <div className="caption">
        Photo caption
      </div>
    </div>
   );
}

export default Photo;

我尝试将onLoad我的最后一项用于，但是它永远不会被调用，因为loading由于仍然显示了微调框，所以它从未设置为false。

在此方面的一些帮助将不胜感激。谢谢

Answer 1

永不调用onLoad的原因是，因为您在DOM中从未拥有图像，所以有条件地将display属性设置为none＆block，而不是有条件地呈现。

下面是一个简单的示例，说明如何等待所有图像加载。

可以安全地假定文件大小最大的图像很可能是最后加载的图像

最肯定不是！，图像加载所需的时间并不总是局限于大小，缓存或服务器加载会影响这些。

const {useState, useEffect, useRef} = React;



const urls = [

  "https://placeimg.com/100/100/any&rnd=" + Math.random(),

  "https://placeimg.com/100/100/any&rnd=" + Math.random(),

  "https://placeimg.com/100/100/any&rnd=" + Math.random()

];



function Test() {

  const [loading, setLoading] = useState(true);

  const counter = useRef(0);

  const imageLoaded = () => {

    counter.current += 1;

    if (counter.current >= urls.length) {

      setLoading(false);

    }

  }

  return <React.Fragment>

    <div style={{display: loading ? "block" : "none"}}>

       Loading images,

    </div>

    <div style={{display: loading ? "none" : "block"}}>

      {urls.map(url =>

        <img

          key={url}

          src={url}

          onLoad={imageLoaded}/>)}

    </div>

  </React.Fragment>;

}



ReactDOM.render(<React.Fragment>

  <Test/>

</React.Fragment>, document.querySelector('#mount'));


<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="mount"></div>