javascript - 如何在 html 中为具有动态高度的图像设置占位符高度？

Question

我有一个使用此 css 具有动态宽度和高度的图像:

.sm_item_image {
    width:100%;
    height:auto;
    max-width:400px;
}

问题是图像可能需要一段时间才能下载，虽然它还没有下载，但高度为 0。基本上是一闪而过的不需要的内容。我正在寻找一种方法来将高度设置为某个值，以便占用与当前宽度相同的空间。

有人知道方法吗？

谢谢

Answer 1

A) 使用 width和 height在 <img>

这就是width和 height <img> 的属性是给。如果您在创建 <img> 时知道服务器端的图像尺寸标记，将它们放入，即使您使用 CSS 覆盖它们也是如此.浏览器会知道计算比例高度，并会在加载图像之前正确调整页面大小。

---

B) 使用不可见的缩略图

另一种选择是拥有图像的小缩略图，您加载这些缩略图的唯一目的是快速生成正确的比例。它们可以小 20 倍，没关系，因为您没有显示它们。加载时，您只显示完整图像作为图像占位符的背景。

例子:

.imgContainer {
  background: #eee no-repeat 50% 50% /cover;
  overflow: hidden;
}
.imgContainer > img {
  opacity: 0;
  width: 100%;
  float: left;
}

<div class="imgContainer" style="background-image: url('//path/to/full/image')">
   <img class="img-responsive" src="//path/to/thumbnail" />
</div>

B) 的一个小“奖励”是用户在尝试下载您的脆皮图像并最终在右键单击> 上看到小缩略图时得到的惊喜将图像另存为...”

---

这是一个活生生的例子，使用了一张巨大的图片:

$('.imgContainer>img').on('click', function(){
  $(this).toggleClass('visible');
})

.imgContainer {
  background: #eee no-repeat 50% 50% /cover;
  overflow: hidden;
}
.imgContainer > img {
  opacity: 0;
  width: 100%;
  float: left;
  transition: opacity .3s ease-in-out;
  cursor: pointer;
}

.imgContainer > img.visible {
  opacity: 1;
}

 /* SO reset, you don't need what's below, it's just positioning and reset */
body {
  padding: 0; margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh;
}
.imgContainer {
  width: 60%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgContainer" style="background-image: url('http://wallpapercave.com/wp/wc1756933.jpg'), url('/image/26mip.png');">
   <img class="img-responsive" src="/image/26mip.png" />
</div>

我在这个上面添加了一个小脚本来切换 opacity单击缩略图，以便您看到差异。

如果加载完整图像的时间太长，并且您不介意用户在等待时看到缩略图，请将缩略图添加到 background-image属性，就像我在上面的例子中所做的那样:

<div class="imgContainer" style="background-image: 
     url('//path/to/full/image/'), url('//path/to/thumbnail/image/');">
  <img src="//path/to/thumbnail/image/" class="img-responsive" />
</div>

可以在background-image中设置多张图片属性，它们将全部加载(如果找到)，第一个在顶部，最后一个在底部。因此，在完整尺寸加载之前，用户会看到模糊的拇指，并且图像会突然变得清晰并变得清晰。