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

【问题标题】：How can I make browser scale image frames according to CSS before loading actual images into frames?在将实际图像加载到框架之前，如何根据 CSS 使浏览器缩放图像框架？
【发布时间】：2013-03-30 19:22:36
【问题描述】：

在一个网页中，我有几个相互堆叠的图像。图片的 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 设置缩放图像帧。
按顺序加载图片，从顶部的图片开始到页面的下方。

使用伟大的Lazyloading plugin 当然可以是一个解决方案，但它似乎有点矫枉过正。

我也可以使用javascript检测窗口宽度，然后更改html标签中的width和height，但这似乎没有必要。

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

非常期待您的想法！感谢您阅读这篇长文:)！

【问题讨论】：

标签： html css image lazy-loading loading

【解决方案1】：

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

Firefox 倾向于加载一个接一个的渐进式 JPEG，而 Chrome 会同时加载所有这些。

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

我认为将 height: auto; 放入图像的 css 中会有所改进（图像框架的尺寸会更快），但这是一个微小的差异，我不确定。

解决方案是编写一个javascript，它首先使用占位符图像，然后顺序读取图像并让它们逐步显示。

感谢您对如何编写此脚本或解决我的问题的其他意见！

【讨论】：