Question

我对http://www.e-flux.com所示的图片加载方式有疑问。在继续显示实际图像之前，该网站首先加载某个图案的图像（随机）。我的猜测是，即使加载了整个网站，也要有视觉上令人愉悦的内容。

我查看了源代码，我发现它有一个＆＃34; lazy is-loading＆＃34;的类。我认为它必须做点什么。

我想复制这种效果并做一些关于渐进式图像的研究。此外，这个网站：＆＃39; css-tricks.com the-blur-up-technique-for-loading-background-images /＆＃39;解释了如何首先加载一个小图像并将其模糊以使加载时间保持较低，直到下载实际图像为止。

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

所有信息都表示赞赏！

Answer 1

查看他们的来源，使用位于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;
}

Answer 2

有时不希望使用CSS background-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 3

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

我正在做同一件事，而我正在尝试的简单操作如下：

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

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

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

3 个答案: