在响应式网格中加载图像时如何使用图像占位符？

Posted 2023-03-05

【中文标题】在响应式网格中加载图像时如何使用图像占位符？

【英文标题】：How to use an image placeholder while images load in a responsive grid?

【发布时间】：2015-07-15 19:46:09

【问题描述】：

使用响应式流体网格，图像为 800px x 500px

问题：加载图片时，页脚在顶部，在加载图片时被向下推。

设置：对图像使用 div，对页脚使用 div。

目标：让页脚始终保持在正确的位置，而不是试图将其放在绝对位置，只是希望考虑到图像间距。

想法：也许使用 800x500 的透明 png，以便它在图像之前首先加载。

问题：创建 800x500 的 div 占位符可能不起作用，因为这些图像在流体网格中是响应式的，因此除非查看器有一个巨大的显示器，否则它们实际上永远不会达到那个尺寸。..

图片加载后的最终结果：

当前问题：

图片加载目标：

【问题讨论】：

您可以在 CSS 中创建一个透明图像用于加载目的，然后替换 onLoad 回调中的透明图像引用...

谢谢@abiessu 你能指出我如何执行这个的正确方向吗？

***.com/a/24663598/2592931 是我放在一起讨论在 CSS 中创建图像的基本方法的答案。我相信也有一种方法可以使一个透明的。

谢谢，但我不知道这是什么意思，哈哈

【参考方案1】：

当我知道无论元素/屏幕的宽度是多少，某些东西的纵横比都将保持不变时，我会这样做：

.image-holder 
    display: inline-block;
    width: 33.333%;
    position: relative;

.image-holder:before 
    content:"";
    display: block;
    padding-top: 62.5%;

.image-holder img 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

这是一个完整的演示：http://jsfiddle.net/serv0m8o/1/

我将每个图像包装在 div 中，并使用 image-holder 类（其样式为您提供您所说明的每行 3 个模式）并确保它是 position: relative;

然后我将div 的:before 伪元素设置为所需纵横比的适当高度。 CSS 中的填充是一个内在属性，这意味着它基于元素的宽度，允许您分配一个反映比率的百分比。您指定了 800x500 图像，所以 (500/800*100) = 62.5% 是我的 padding-top

然后，您可以绝对定位您的图像以填充容器的整个宽度和高度（这就是我们将其设置为 position: relative; 的原因）

这样做意味着div 元素是图像的大小，无论图像是否加载到其中（图像本身与容器大小无关，因为它是绝对定位的）

【讨论】：

谢谢，Blake 真的很酷。但是，这有一些问题。它在图像加载时显示损坏的图像图标（我正在使用 FF）。其次，我没有提到我的图像从 4 宽到 3 宽再到 2 宽的断点是我的错。因此，没有必要无限地使用 3 宽。想法？

嗨，我使用img 元素只是为了适合您的示例，但实际上我并没有放置有效的图像源，所以这就是您看到的原因。如果你把它付诸实践，就不会这样了。在断点方面，只需将容器div 设置为与图像相同的样式，纵横比将始终保持正确，无论您将div 设置为什么宽度。

是的，当然。我用正确的图像链接尝试了该代码，但仍然看到它。也许这只是我的浏览器？

我已经更新了我的演示以使用真实图像：jsfiddle.net/serv0m8o/1。你在这里看到同样的问题吗？你绝对不应该看到损坏的图片链接

是的，那些占位符的图像会立即加载，因为它们的尺寸非常小。我粘贴了一些较大的图片链接，加载时会短暂出现损坏的框。