有没有办法替换尚未加载的默认图像浏览器图标

Is there a way to replace the default image-not-loaded-yet browser icon?

本文关键字：默认 图像 浏览器 图标 加载 替换 有没有      更新时间：2023-09-26

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

我想找到或构建一个IMG包装器，它首先显示本地缓存中的默认背景图像，然后在加载后显示预期的照片，类似于Pinterest的做法（尽管Pinterest更酷，检测到与加载图像互补的颜色背景）。

我有一个应用程序，可以加载很多照片——数百张——我想让它们加载到一个功能中，而不是浏览器的丑陋工件中。

如果他们看起来像这样不是很酷吗？

http://screencast.com/t/qlTUN9Z3MO

而不是像这个

http://screencast.com/t/qlTUN9Z3MO

能做到吗？

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

首先，你需要一个背景svg。您可以使用简单的background-image: url(x.svg)语法，也可以考虑使用数据url。有一个免费的编码工具。

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

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

现在，当您的图像正在加载时，background-image将显示出来。一旦加载；它将覆盖背景（假设完全不透明）。

相关文章：