如何在加载实际内容之前加载小的占位符图像 [英] How to load a small placeholder image before loading the actual content

问题描述

我对图像加载样式有疑问，如 http://www.e-flux.com上所示.该网站首先显示(随机)某种模式的图像，然后再显示实际图像.我的猜测是，这甚至在加载整个网站之前都具有视觉上令人愉悦的内容.

I have a question regarding the image loading style as shown on http://www.e-flux.com. This website first loads an image of a certain pattern (randomly) before proceeding to display the actual image. My guess is that this is to have visually pleasing content before even having loaded the total website.

我看了看源代码，发现它有一类延迟加载".我认为这与之有关.

I have looked at the source code and I saw that it had a class of "lazy is-loading". I think it has to do something with that.

我想复制这种效果，并对渐进式图像等进行了一些研究.另外，该网站:"css-tricks.com用于加载背景图像的模糊技术"，介绍了有关先加载小图像并对其进行模糊处理以降低加载时​​间，直到下载完实际图像为止的方法.

I'd like to replicate this effect and did some research, about progressive images and such. Also, this website: 'css-tricks.com the-blur-up-technique-for-loading-background-images/' explains about loading a small image first and blur it to keep loading times low until the actual image has been downloaded.

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

感谢所有信息！

推荐答案

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

Old question but doesn't have a selected answer.

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

I'm working on the same thing, and something simple I'm trying is as follows:

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

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

the .svg is a very small file and thus loads almost instantly. Then, the .jpg pops in when it's done. I literally have no other code - trying to keep it simple.

这篇关于如何在加载实际内容之前加载小的占位符图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！