Как загрузить изображения без прокрутки страницы?

Question

Я делаю сайт, и есть часть сайта, где вы можете просматривать пакеты и заказывать пакеты. Когда вы бронируете пакет, он прокручивается вниз до контактной формы и заполняет любой пакет, который вы забронировали.

Тем не менее, над разделом пакета есть раздел портфолио на сайте с множеством изображений. Проблема в том, что когда вы нажимаете на ссылку, чтобы забронировать пакет, на странице появляется форма контакта, но изображения в портфолио загружаются и возвращают окно просмотра обратно к изображениям, потому что они загружаются и, таким образом, забирают пользователя из контактной формы ...

Я оставлю ссылку на тестовый сервер, чтобы вы могли видеть, о чем я говорю.

Это просто тестовый сервер, я изменю его позже.

http://68.183.175.48/

вот мой css для раздела портфолио

#portfolio {
  min-height: 50vh;
  width: 100%;
}

.portfolio__image:hover {
  transition: .5s;
  filter: brightness(50%);
}

вот мой HTML. Опять же, я использую ruby ​​на рельсах, так что это синтаксис ERB

<section id='portfolio'>
  <div class='container'>
    <h2 class='section-title mt-5'>Portfolio</h2>
    <div class='row no-gutters mb-5'>
      <% @homepage.images.each do |image| %>
        <div class='col-lg-3 col-md-6 col-sm-12'>
          <%= link_to image_tag(image, class: 'portfolio__image', width: '100%'), rails_blob_url(image), class: '' %>
        </div>
      <% end %>
    </div>
  </div>
</section>

Answer 1

По вашей ссылке и браузеру Chrome я не вижу проблем - изображения загружаются над формой, а страница не перемещается, как вы описали.

У меня быстрое соединение, поэтому я предполагаю, что вы описываете, что ваши изображения еще не загружены, поэтому пространство страницы еще не выделено в DOM - поэтому, когда вы переходите к области формы, изображения затем загрузите, и их размеры нажмите на страницу / форму, означая, что ваши изображения попадают в ту область страницы, которая занята формой.

Возможно, один из способов решения этой проблемы - использовать ограничивающую рамку фиксированной высоты вокруг галереи, чтобы она имела обозначенную область, даже если изображения еще не загружены?

В качестве альтернативы укажите размеры изображения в HTML, чтобы DOM знал о месте, которое можно зарезервировать, даже если изображение еще не загружено (это может быть лучшим вариантом)