Html 在将实际图像加载到帧之前，如何使浏览器根据CSS缩放图像帧？

在一个网页中，我有几个图像，它们叠在一起。图像的CSS是

img {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    margin-bottom: 0.66em;
}

所有图像都在html img标记中指定了适当的高度和宽度

当页面在慢速连接上加载时，我希望在实际图像加载到帧之前，帧中的图像将显示为缩放。这是因为它有时看起来像这样：

[----------------]
[  Loaded image  ]
[----------------]

[ Not loaded image ]

[----------------]
[  Loaded image  ]
[----------------]

加载的图像大小正确，但未加载的图像仍然只是显示

alt=text

的一行

然后，当三个负载的中间部分膨胀到合适的大小，并移动其他负载

我希望外观和加载与没有CSS时相同：图像显示的空帧以正确的像素大小显示，然后用图像填充

请注意，这当然是一个问题，只有在缓慢的连接，图像不是那么大真的

这些图像是渐进式JPG

我想：

• 在填充图像之前，根据css设置缩放图像帧
• 按顺序加载图像，从顶部的图像开始，继续向下加载页面

使用great当然可能是一个解决方案，但这似乎有些过头了

我还可以使用javascript检测窗口宽度，然后更改html标记中的

宽度

和

高度

，但这似乎是不必要的

我更喜欢一个解决方案，我不必改变图像本身的代码。如果可以实现，最好只使用css

---

非常期待你的想法！感谢您阅读这篇长文章：）

据我所知，页面中对象的加载顺序只能通过javascript进行控制。不同的浏览器也会以不同的方式加载页面：

Firefox倾向于一个接一个地加载渐进式JPEG，而Chrome则开始同时加载所有JPEG

用于jQuery的Lazyload插件可能是一个解决方案，它可以很好地进行图像的占位符和缩放，但是它禁用了jpeg的渐进下载

我认为推杆

高度：自动对图像进行了改进（图像帧的大小更快），但这只是一个细微的差别，我不确定

解决方案是编写一个javascript，它首先使用占位符图像，然后依次读取图像并允许它们逐步显示

感谢您对如何编写此脚本或对我的问题提供不同解决方案的进一步意见