À 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 lapreloader
image se charge.
Vous devez vous connecter pour publier un commentaire.
Voici une explication de pourquoi
preloader
image n'est pas rendu:preloaderImage
chargesimageLoadHandler
déclencheurs etsrc
attribut est modifié le principalimage
src (doncpreloaderImage
n'est pas rendu, il est maintenant chargé)Comment vous devez le faire correctement:
Si vous écrivez Réagir application, vous devez le faire Réagir de façon:
Ensemble de vos images pour le composant
state
dans sonconstructor
méthode. Vous avez besoin de le faire parce que tu vas changer la façon dont vos images sont rendus (à Réagir vous parvenir à rendre des changements avec la modification de l'une des composantes duprops
oustate
, dans votre cas, il devrait êtrestate
). Mais notez que vous devez définirsrc
propriété pour chaque image dans la liste de vospreloaderImage
(dans l'exemple ci-dessous, je suis en utilisantobjet déstructuration
syntaxe).Maintenant dans
render
la méthode de créer la liste des images comme ceci (notez que vous n'avez pas besoinonLoad
gestionnaire ici):Dans
componentWillMount
méthode de démarrage pour charger vos images primairessrc
dynamiquement à l'aide de la vanille JS (vous pouvez lire l'article à ce sujetici
). Qu'ils sont chargés d'appelsetState
méthode de mise à jour des imagessrc
propriété:Après
setState
est appelé à changéimages
tableau Réagir automatiquement rerender vos images avec la bonnesrc
chemin.Façon plus élégante avec l'utilisation de CSS:
Au lieu de
<img />
balise, vous pouvez utiliser<div />
tag avecbackground-image
propriété css. De là, vous pouvez tout simplement mis de secours (précharge) image:Vous pouvez définir des chemins d'accès de façon dynamique avec
style
propriété (dans votrerender
méthode):Il suffit de ne pas oublier de mettre
height
etwidth
à ce<div />
.Ne sais pas si cela aide, mais vous pouvez définir une propriété CSS pour votre image lors du chargement (par exemple, l'opacité ou la visibilité de l'ensemble de ne pas afficher l'image) et ensuite modifier cette propriété CSS lors de la
onLoad
événement est déclenché. Vous pouvez utiliser le même pour votre préchargement de l'image, mais, évidemment, en mode inverse.Vous devez également être en mesure de définir une action de secours si l'image ne se charge pas, en appelant le
onError
fonction de l'image que vous chargez.Espérons que cette aide!