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

Question

在一个网页中，我有几张图像相互堆叠。图片的 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。

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

Answer 1

据我所知，除了使用 javascript 之外，无法通过任何其他方式控制页面中对象的加载顺序。不同的浏览器加载页面也不同:

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

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

我认为将 height: auto; 放在图像的 css 中会有所改进(图像框架更快地获得合适的尺寸)，但这是一个边际差异，我我不确定。

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

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