Tengo un componente que muestra imágenes. El componente también tiene una barra de menú.
Durante la solicitud inicial del servidor, este componente siempre muestra la barra de menú durante una fracción de segundo porque la imagen real aún no está cargada.
¿Cómo mostrar la barra de menú solo después de que la imagen esté lista?
EDITADO:
Puedo determinar cuándo las URL de las imágenes están cargadas y disponibles. Pero, ¿cómo saber si la imagen en sí está lista?
Puede utilizar la representación parcial, por ejemplo
import React, { useEffect, useState } from 'react'; function App() { const [data, setData] = useState(null); useEffect(()=>{ setData(true); }, []); return ( <div> {data && <div> after data is not null this will be visible</div>} </div> ); } export default App;Puede establecer un estado como se muestra a continuación y cargar el menú en función de este valor;
const [ImageLoaded, setImageLoaded] = useState(false);Puedes hacerlo así:
function YourComponent () { const [imgLoaded, setImgLoaded] = useState(false); const handleImgLoad = () => { setImgLoaded(true); } return( <> <img onLoad={handleImgLoad} src="..." alt="..." /> {imgLoaded ? <MenuBar /> : <></>} </> ); }