À l'aide de la méthode onLoad de charger des images à Réagir?

Mon but est d'avoir ma galerie d'images de rendu qu'ils ont la charge.

La recherche en ligne, j'ai appris à propos de l' onLoad méthode.

C'est ce que j'ai essayé de l'utiliser, l'idée étant que le preloader.gif rendrait jusqu'à ce que l'image est chargée, et il suffit de remplacer l'image src avec l'image chargée.

Comme il est maintenant(ci-dessous), les images semblent à la charge de la même manière qu'ils le feraient normalement si je n'ai pas utilisé le onLoad méthode, donc il y a un moment où aucune image ne s'être rendu avant le chargement des images stockées dans.

Ce que je fais mal exactement?

J'ai démonté le code pour rendre la question plus facile à lire.

import React from 'react';
import ReactDOM from 'react-dom';

import preloaderImage from '../../../img/site/preloader.gif';

class WorksPage extends React.Component {

  constructor(){
    super();
  }

  imageLoadHandler(image,e) {
    e.target.src = image;
  }


  render() {

    const listWork = this.props.array.map((item,index)=> {
      return(
        <li key={item.id}>
          <div>
            <img src={preloaderImage} onLoad={this.imageLoadHandler.bind(this,item.image)}/>
          </div>
        </li>
      )
    });

    return(
      <li>
        <div>
          <ul>
            {listWork}
          </ul>  
        </div>  
      </li>
    )
  }
}

module.exports = WorksPage;
  • Donc, il rend toujours votre image de test?
  • Désolé, je n'étais pas clair. Non, il effectue le rendu de l'image finale. La visite de la page, vous ne voyez pas l'image de l'épreuve à tous, au lieu de cela, il apparaît comme si la page est vide jusqu'à ce que les images finales en charge. Je sais que l'image de l'épreuve est rendu, parce que si je remove the e.target.src = image code de la preloader image se charge.
InformationsquelleAutor Moe-Joe | 2017-09-11