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即使在图像尚未加载时也知道要保留的空间（这可能是最好的选择）

如何在不使页面滚动的情况下加载图像？

1 个答案: