0

在一个网页中，我有几张相互堆叠的图像。图像的 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 插件当然可以是一个解决方案，但它似乎有点矫枉过正。

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

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

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

4

1 回答 1

0

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

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

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

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

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

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

于 2013-03-28T19:45:48.147 回答