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

Question

我对http://www.e-flux.com 上显示的图像加载样式有疑问。该网站首先（随机）加载特定图案的图像，然后再继续显示实际图像。我的猜测是，这是在加载整个网站之前就拥有视觉上令人愉悦的内容。

我查看了源代码，发现它有一类“延迟加载”。我认为它必须与此有关。

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

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

所有信息表示赞赏！

Answer 1

有时 CSSbackground-image是不需要的。您还可以使用简单的内联 JavaScript 来实现此目的，缺点是占位符图像必须首先正确加载。但是，这通常不是问题，因为占位符图像首先加载速度会更快，并且可能已经在缓存中。

例如：

<img src="placeholder.jpg" data-src="my-image.jpg" onload="if(this.src !== this.getAttribute('data-src')) this.src=this.getAttribute('data-src');">

这是有效的，因为浏览器通常会将当前显示的图像保留在视图中，直到加载新图像。

它可能不是一个完美的解决方案，但它很简单、相当可读并且易于实现。

Answer 2

老问题，但没有选定的答案。

我正在做同样的事情，我正在尝试的简单事情如下：

<img style="background-image: url('MYIMAGE.svg');" src="MYIMAGE.jpg" width="500">

.svg 是一个非常小的文件，因此几乎可以立即加载。然后，完成后会弹出 .jpg 文件。我实际上没有其他代码 - 试图保持简单。

Answer 3

看看他们的源代码，它是使用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;
}