Mostra elemento predefinito durante il caricamento Immagine

Question

Ho un componente che rappresenta un avatar utente che carica un'immagine dalla mia API. Voglio che mostri un avatar predefinito (non un'altra immagine) mentre l'avatar sta caricando.

constructor() { 
    super(); 
    this.state = { 
    loaded: false, 
    }; 
} 

render() { 
    if (!this.props.uri || !this.state.loaded) { 
    return (
     <DefaultAvatar /> 
    ); 
    } 
    return <Image onLoad={this.onLoad.bind(this)} uri={this.props.uri} />; 
} 

onLoad() { 
    this.setState({loaded: true}); 
} 

Il problema che ho è che con questo codice attuale, non sarà mai reso la Image, così lo Stato non cambierà mai. Non riesco a trovare una soluzione che soddisfi i principi React e le mie esigenze (nessun componente fantasma per caricare l'immagine prima di visualizzarla).

Answer 1

Image.prefetch mi permetterà di fare quello che voglio, grazie a tutti.

Answer 2

class LazyImage extends React.Component{ 
    constructor() { 
    super(this.props) 
    this.state = {loaded: false} 
    } 

    handleLoad() { 
    this.setState({loaded:true}) 
    } 

    componentDidMount() { 
    this.img = new Image() 
    this.img.onload = this.handleLoad.bind(this) 
    this.img.src = this.props.src 
    } 

    render() { 
    return this.state.loaded?<img src={this.props.src}/>:<div>Loading...</div> 
    } 
} 

Si crea un Image elemento naturale e aspettare che si carichi. Quindi esegui il rendering dell'immagine con la reazione. Il browser è intelligente e questa volta lo preleva dalla cache. Rendering istantaneo!

Vedere http://jsfiddle.net/4hq3y4ra/3/ per una demo.

Answer 3

Ci sono diversi modi per ottenere questo risultato, tuttavia per mantenere le cose semplici, è possibile utilizzare una condizione letterale per attivare l'avatar predefinito e l'immagine reale.

constructor() { 
    super(); 
    this.state = { 
    loaded: false, 
    }; 
} 

onLoad(dataUri) { 
if(dataUri !== undefined){ 
    this.setState({loaded: true}); 
    } 

}, 

render() { 

    return (
      <Image onLoad={this.onLoad} uri={this.state.loaded ? this.props.uri : 'default-avatar'} /> 
     ); 

}