Задать вопрос
@mosikus

Как сделать заглушку до загрузки изображения (onLoad)?

Здравствуйте. На странице нужно использовать 3 разных изображения и сделать для каждой заглушку до загрузки изображения. Способ ниже не работает, а, именно, изображение не отображается, что не так ?
const [isLoading, setLoading] = React.useState(false);
const handleOnLoad = () => {
    setLoading(true);
}

{isLoading === true ? (<img onLoad={handleOnLoad } src="https://i.5sfer.com/post/postImage/thumb-8ipwnn.jpg"/>) : (<div>*Заглушка*</div>)}

*Так*
function App() {
  const [isLoading, setLoading] = React.useState(true);
  const handleOnLoad = () => {
    setLoading(false);
  };

  return (
    <div>
      {isLoading && <div>*Заглушка*</div>}
      <img
        alt="alt"
        onLoad={handleOnLoad}
        src="https://i.5sfer.com/post/postImage/thumb-8ipwnn.jpg"
      />
    </div>
  );
}

работает, но при медленном интернет-соединении заглушка отображается прямо над картинкой, пока она загружается, а я хотел бы отображать заглушку до полной загрузки картинки. Как это сделать ?
  • Вопрос задан
  • 2253 просмотра
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Решения вопроса 1
@artembatura
1. Проблема конкретно в самой ссылке. По этой ссылке ничего не загружается, потому что ресурс (сайт) не доступен.
2. Нужно обрабатывать кейс, когда картинка не загружается, с помощью onError. Лучше всего будет отображать другую заглушку в этом случае.
3. Можно скрывать картинку стилями, пока она не загрузилась, чтобы твоя заглушка отображалась гарантированно корректно.

Вот пример
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽