Estoy tratando de mostrar una pantalla de carga hasta que un componente dentro de un componente principal principal cargue su imagen de fondo. La mayoría de los artículos que encontré trataban sobre imágenes colocadas directamente en el DOM como etiquetas. Tengo un componente que usa una imagen de fondo.
Aquí está mi componente Inicio, que actúa como mi contenedor principal para todos los componentes:
class Home extends React.Component { constructor() { super(); } render() { return ( <div> <Helmet> <link id="favicon" rel="icon" href="../SB.png" type="image/x-icon"/> <title>Snow Bounds</title> </Helmet> <CustomNavBar /> <HeroUnit /> <RoadMap /> <TeamFAQ /> <Footer /> </div> ) } } export default Home;El componente en cuestión es el componente HeroUnit, que es el siguiente:
class HeroUnit extends React.Component { render() { return ( <div id="home" className={`fullHeightContainer m-auto bg-primary-hero grad bg-info py-4`} style={{position: "relative"}}> <Snowfall snowflakeCount={50} color={"rgba(255, 255, 255, .2)"} /> <Container className="h-100"> <div className="heroMainBG h-100" style={{position: "relative",zIndex: 1000}}> </div> </Container> </div> ) } } export default HeroUnit;¿Cómo puedo hacer que aparezca una pantalla de carga hasta que se cargue Hero Unit heroMainBg?
Avísame si necesitas algún otro código.. :)
solo usa esto
class Home extends React.Component { constructor() { super(); this.state = { loaded: false; } } render() { window.addEventListener("load", event => { var image = document.querySelector('add the id or className'); var isLoaded = image.complete && image.naturalHeight !== 0; if(isLoaded)this.setState({loaded:true}); alert(isLoaded); // this tells you whether the image has loaded or not }); return ( this.state.loaded&&<div> <Helmet> <link id="favicon" rel="icon" href="../SB.png" type="image/x-icon"/> <title>Snow Bounds</title> </Helmet> <CustomNavBar /> <HeroUnit /> <RoadMap /> <TeamFAQ /> <Footer /> </div> ) } } export default Home;Puede agregar un cargador cuando la imagen no está cargada: algo como esto:
!this.state.loaded?<Loader />:Your whole component