#javascript #html #css #reactjs #frontend
#язык JavaScript #HTML #CSS #реагирует на #внешний интерфейс
Вопрос:
У меня есть компонент, который отображает изображения. Компонент также имеет строку меню.
Во время первоначального запроса сервера этот компонент всегда показывает строку меню на долю секунды, потому что на самом деле изображение еще не загружено.
Как отобразить строку меню только после того, как изображение будет готово?
отредактированный:
Я могу определить, когда URL-адреса изображений загружены и доступны. Но как определить, готово ли само изображение на самом деле?
Комментарии:
1. Если вы поделитесь каким-то кодом, я могу ответить более точно, но, допустим, у вас есть состояние под названием изображения, в котором вы храните свои изображения после их получения из api. перед вашим основным оператором возврата вы можете использовать if и вернуть индикатор загрузки, если изображения не загружены.
2. Пожалуйста, добавьте больше к вопросу о том, является ли источником изображения локальный диск или что-то еще, было бы действительно полезно поделиться фрагментом кода, сделав дикое предположение, что я чувствую, что вам нужно реализовать условный рендеринг компонента только в том случае, если изображение доступно в случае, если вы получаете его из удаленного источника. с локального диска иногда требуется несколько миллисекунд в зависимости от размера формата изображения.
Ответ №1:
Вы можете использовать частичную визуализацию, например
import React, { useEffect, useState } from 'react'; function App() { const [data, setData] = useState(null); useEffect(()=gt;{ setData(true); }, []); return ( lt;divgt; {data amp;amp; lt;divgt; after data is not null this will be visiblelt;/divgt;} lt;/divgt; ); } export default App; Ответ №2:
Вы можете установить состояние, как показано ниже, и загрузить меню на основе этого значения;
const [ImageLoaded, setImageLoaded] = useState(false); Ответ №3:
Ты можешь сделать это вот так:
function YourComponent () { const [imgLoaded, setImgLoaded] = useState(false); const handleImgLoad = () =gt; { setImgLoaded(true); } return( lt;gt; lt;img onLoad={handleImgLoad} src="..." alt="..." /gt; {imgLoaded ? lt;MenuBar /gt; : lt;gt;lt;/gt;} lt;/gt; ); }