如何在加载实际内容之前加载小占位符图像

我对http://www.e-flux.com上显示的图像加载样式有疑问。在继续显示实际图像之前，本网站首先加载某种图案的图像（随机）。我的猜测是，即使已经加载了整个网站，这也是在视觉上令人愉悦的内容。如何在加载实际内容之前加载小占位符图像

我已经看过源代码，我看到它有一类“lazy is-loading”。我认为它必须做些什么。

我想复制这种效果，并做了一些研究，关于渐进的图像等。另外，这个网站：'css-tricks.com the-blur-up-technique-for-loading-background-images /'解释了关于首先加载一个小图像并模糊它以保持加载时间较低直到实际图像被下载。

但我似乎无法找到他们如何在http://www.e-flux.com这样做。

所有信息表示赞赏！

2016-11-22 GillSans

您使用图像标记以占位符作为源，然后使用js在加载时更改src。这是为了使所有图像使用相同的来源（意味着更少的请求 - 1，而不是你有多少图像;而页面加载导致更好的页面加载速度） – Pete

你可以设置加载图像到img的背景，它将会看到直到img源文件被加载 –

对不起，无法看到该网站，看到他们使用的是一个背景图片作为占位符，你也可以这样做，然后在页面加载时在顶部插入图像 - 相同的结果因为只是更改图像源 – Pete

看着它们的来源，其使用background-image精灵，定位在div元素上进行 - 这是最终加载的图像一起..：

<div class="lazy-placeholder item-image-wrapper-bg6" style="width: 512px"></div>

和

.item-image-wrapper-bg6 { 
    background-image: url(../elements/bg-6.gif?2); 
    background-size: 85px; 
}

2016-11-22 16:26:47 Stuart

回答