Question

（请注意，这并不是指破损图像，因此不会与之前提出的问题重复）。

我想找到或构建一个IMG包装器，它首先显示来自本地缓存的默认背景图像，然后在加载后显示预期的照片，类似于Pinterest所做的（虽然Pinterest更酷并且检测到颜色补充正在加载的图像的背景。

我有一个可以加载大量照片的应用程序 - 数百个 - 我想让它们加载一个功能而不是浏览器的丑陋工件。

如果他们看起来喜欢这个会不会很酷？

而不是喜欢这个

能做到吗？

Answer 1

我建议在CSS中使用SVG background-image。您还可以使用background-size ^doc缩放它以适合您的显示比例。另外，请记住设置img的大小（使用CSS或HTML属性），而不是让它使用图像的大小。

首先，你需要一个背景svg。您可以使用简单的background-image: url(x.svg)语法，也可以考虑使用data-url。有一个free tool用于编码它们。

接下来，您需要设置背景的大小。如果您的图像查看器具有不同的宽高比，请使您的svg具有相同的比例。然后，告诉它垂直或水平填充。这应该没关系，但在侥幸的情况下，我发现垂直更可靠。

background-size: auto 100%; /* Vertical (full height) */
background-size: 100%; /* Horizontal (full width) */

现在，在加载图片时，background-image会显示。一旦装满;它将覆盖背景（假设完全不透明）。