全宽图像，加载时停止布局更改答案

【问题标题】：Full width image, stop layout changing while loading全宽图像，加载时停止布局更改
【发布时间】：2015-12-20 08:14:08
【问题描述】：

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

这通常通过 CSS 设置图像的高度来解决，以便在图像加载后，布局不会改变。在我的情况下，它不起作用（至少不是直接起作用），因为我不知道图像的 height：作为全宽图像，它的高度实际上由视口的宽度决定。

img {
  width: 100%;
}

是否有任何纯 CSS 方法来解决此问题（在加载之前为图像保留空间，仅通过知道图像大小）？

这是demo

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

【问题讨论】：

似乎在那个演示中工作......
@Johannes 我不希望在图像加载后将内容下推。我希望绿色 div 在图像加载前后位于同一位置。在图像加载之前，顶部应该只有空白，在内容之前，图像所在的位置。 PS：我用的是谷歌浏览器
好的，我刚刚看到：如果容器比高宽（我一开始有），它会起作用。当容器高于宽时，您的描述是正确的。我知道，这无济于事，但仍然可能是解决方案的提示......
你好，有js的方式可以解决，但是我觉得没有css的方式可以解决

标签： html css responsive-design

【解决方案1】：

就像我在评论中说的我不知道，我认为这个问题没有 css 解决方案，但我创建了 jQuery 解决方案，它可能会有所帮助，希望会：)

图像包装到容器中并在图像加载之前设置高度

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

DEMO

【讨论】：

【解决方案2】：

这是一个你想要做的小提琴（至少看起来像）：https://jsfiddle.net/Lhd801eu/（已编辑，起初图像太小）

你的小提琴中的问题似乎是小提琴网站本身：<img>tag 也有id="img"，没有真正的srcattribute，这似乎不太好......

我将 ID 更改为“xxx”（无意义，可以是任何东西）并在 src 属性中放入我在照片网站上找到的某个文件的 URL（该图像大小约为 1MB，这不会立即加载）

似乎是这样工作的......（？）

【讨论】：

您所做的实际上是将图像 src 设置为同一文件，该文件由浏览器缓存，您不必再加载它。这只会阻止您看到错误。如果您清除缓存，您仍然会看到它。因此，这与实际问题无关。更改图像的 ID 只会停止我编写的 JS 工作（JS 每次加载不同的图像，因此浏览器不会缓存它）。
我每次尝试之前都清空了缓存 - 我知道这一点。而且我还多次将 URL 更改为其他类似大小的图像。而且我仍然没有看到它发生，至少在 JS fiddle 页面上没有看到
顺便说一句，浏览器不仅会缓存最后一个文件/图像，还会缓存更多文件/图像，因此对于您的 JS，所有这些图像一旦被调用就会在浏览器缓存中（除非您每次都清除缓存或停用它，就像我在测试时所做的那样）...
是的，但这就是我使用 JS 的原因，所以每次它加载一个不在缓存中的不同图像（这样你就可以看到加载错误）。实际上，使用我的特定 JS 脚本，它最多可以加载 100 张不同的图像，因为我总是在图像源中附加一个随机数，该数字在 0 到 99 之间。