Html 全幅图像，加载时停止布局更改

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

这通常是通过通过CSS设置图像的高度来解决的，以便在图像加载之前计算并保留图像的空间，以便在加载之后布局不会改变。在我的例子中，它不起作用（至少不是直接起作用），因为我不知道图像的高度：作为一个全宽图像，它的高度实际上是由视口的宽度决定的

img {
  width: 100%;
}

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

这是一个

---

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

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

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

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

---

这里有一把小提琴，它可以做你想要的（至少看起来是这样）：（经过编辑，一开始图像太小）

fiddle中的问题似乎是fiddle站点本身：

属性，它似乎不太好

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

似乎是这样的。。。（？）。我希望绿色div在图像加载前后处于相同的位置。在加载图像之前，图像将位于内容之前的顶部应该只有空白。PS：我正在使用谷歌Chromeokay，我刚刚看到：如果容器的宽度大于高度（我一开始就有的），它就可以工作。当容器高于宽度时，您的描述为真。我知道，这没有帮助，但仍然可能是解决方案的线索…您好，有js方法可以解决它，但我不认为有css方法可以解决它。实际上，您所做的是将图像src设置为同一个文件，该文件由浏览器缓存，您不必再加载它。这只会阻止您看到错误。如果清除缓存，您仍将看到它。所以，这与实际问题无关。更改图像的ID只会停止我编写的JS的工作（JS每次都加载不同的图像，所以浏览器不会缓存它）。我每次尝试之前都清空了缓存-我知道这一点。我还多次将URL更改为其他大小类似的图像。我仍然没有看到这种情况发生，至少在JS fiddle页面上没有看到。顺便说一句，浏览器不仅会缓存最后一个文件/图像，还会缓存更多的图像。因此，对于您的JS，所有这些图像在调用后都会在浏览器缓存中（除非您每次都清除缓存或停用缓存，就像我测试此功能时所做的那样）…是的，但这就是我使用JS的原因，因此，每次它加载一个不在缓存中的不同图像时（以便您可以看到加载错误）。实际上，使用我的特定JS脚本，它将加载多达100个不同的图像，因为我总是在图像源中附加一个随机数，这个数字介于0和99之间。