Изображение сначала загружается не полностью, только после обновления

Я сделал приложение django, которое находится онлайн по адресу: https://www.casualspotter.com/. На моей домашней странице есть карусель с несколькими изображениями. У меня проблема в том, что по какой-то причине изображения не загружаются полностью. После обновления страницы изображения загружаются полностью.

Код карусели:

<div class = "carousel carousel-slider" id = "demo-carousel-content" data-indicators = "true" >
  <a class = "carousel-item" href = "/cp_company">
      <img class='carouselitem' src = "{% static 'images/cp_company.jpg' %}">
      <h2 class = "bottom-left">C.P. COMPANY</h2>
  </a>
    <a class = "carousel-item" href = "/stone_island">
      <img class='carouselitem' src = "{% static 'images/stone_island.jpg' %}">
        <h2 class = "bottom-left">STONE ISLAND</h2>
  </a>
    <a class = "carousel-item" href = "/ma_strum">
      <img class='carouselitem' src = "{% static 'images/mastrum.jpg' %}">
        <h2 class = "bottom-left">MA.STRUM</h2>
  </a>
    <a class = "carousel-item" href = "/barbour">
      <img class='carouselitem' src = "{% static 'images/barbour_lookbook.jpg' %}">
        <h2 class = "bottom-left">BARBOUR</h2>
  </a>
    <a class = "carousel-item" href = "/lacoste">
      <img class='carouselitem' src = "{% static 'images/lacoste_banner.jpg' %}">
        <h2 class = "bottom-left">LACOSTE</h2>
  </a>
    <a class = "carousel-item" href = "/perry">
      <img class='carouselitem' src = "{% static 'images/perry_banner.jpg' %}">
        <h2 class = "bottom-left">FRED PERRY</h2>
  </a>
    <a class = "carousel-item" href = "/paul_shark">
      <img class='carouselitem' src = "{% static 'images/paul_shark_banner.jpg' %}">
        <h2 class = "bottom-left">PAUL & SHARK</h2>
  </a>
    <a class = "carousel-item" href = "/napa">
      <img class='carouselitem' src = "{% static 'images/napa_banner.jpg_large' %}">
        <h2 class = "bottom-left">NAPAPIJRI</h2>
  </a>
    <a class = "carousel-item" href = "/tnf">
      <img class='carouselitem' src = "{% static 'images/tnf_banner.jpg' %}">
        <h2 class = "bottom-left">THE NORTH FACE</h2>
  </a>
</div>

CSS:

img.carouselitem{
    height: auto;
}

Заранее спасибо!

Я только что посетил ваш сайт. Все фотографии без проблем загружаются в карусель (обновлять не нужно) - Но, к вашему сведению, у меня очень быстрое подключение к Интернету.

Ken Lee 24.12.2020 15:49

Хорошо, спасибо! Да, тогда это может быть только для меня.

Lookszz 24.12.2020 15:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
379
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуй это

.carousel.carousel-slider {
    height: 100vh;
}

добавьте его в конец ваших стилей.

Другие вопросы по теме