html - 全宽图像，加载时停止布局更改

Question

我有一个显示在页面顶部的全宽图像。在图像加载之前，它的空间高度为 0，但在加载之后，它会向下推整个内容，从而造成令人不快的加载闪烁。

这通常是通过 CSS 设置图像的 height 来解决的，这样图像的空间就会在 reserved图像加载后布局不会改变。在我的例子中，它不起作用(至少不是直接的)，因为我不知道图像的高度:作为全宽图像，它的高度实际上由视口(viewport)的宽度决定。

img {
  width: 100%;
}

是否有任何纯 CSS 方法来解决此问题(仅在知道图像大小的情况下，在加载图像之前为图像保留空间)？

这是一个demo

LE: 我刚刚注意到，如果存在某种具有与图像相同属性的占位符元素(例如:在顶部添加一个具有相同宽度的元素)，则可以解决此问题/height 作为源图像并且还具有 100% 宽度样式属性)，这样图像所需的空间实际上将由该占位符元素使用。

Answer 1

就像我在评论中所说的那样，我不知道，我认为没有针对此问题的 css 解决方案，但我创建了 jQuery 解决方案，它可能会有所帮助，希望能做到:)

在加载图片之前将图片包裹到容器中并设置高度

$(function() {
  var originalW = 1920;
  var originalH = 800;
  var ratio = originalH / originalW;
  $(".image-wrap").css({
    height: $("body").width() * ratio
  })
});

DEMO