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

Question

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

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

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

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

感谢所有信息!

Answer 1

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

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

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

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