web-dev-qa-db-fra.com

Réagir: montrer la filante de chargement pendant la charge des images

J'ai un React Application qui fait appel à useEffect à mon API qui renvoie une liste d'URL à utiliser comme IMY Image SRCS.

J'utilise react-loader-spinner Pour montrer un composant de chargement Spinner pendant que mes images se chargent.

J'ai une variable loading dans useState pour déterminer si les images sont en cours de chargement.

Je ne peux pas comprendre comment arrêter de montrer le fileur de chargement et montrez mes images une fois qu'ils ont toutes chargé.

Voici mon code:

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;

J'ai essayé d'utiliser onLoad pour mon dernier article, mais cela ne sera jamais appelé car loading _ n'est jamais replacé sur FALSE en raison de la rotation en cours de montrage.

Certaines aides sur cela seraient grandement appréciées. Merci

reactjsimagespinnerloading
7
blueprintchris

Comment vont-ils? Merci pour l'aide. Je l'ai comme les solutions Keith, mais cela n'appelle toujours pas la fonction de surcharge. Le seul moyen de fonctionner et de déclencher sur le téléchargement est qu'au lieu d'affichage, utilisez la visibilité sur la balise parent IMG. J'aimerais que cela fonctionne avec un accessoire

<div style={{visibility: loading ? "hidden" : "visible"}}>
  {urls.map(url => 
    <img 
      key={url}
      src={url}
      onLoad={imageLoaded}/>)}
</div>
0
cpio_