2

(Note this does not refer broken images as therefore not a duplicate of previously asked questions).

I'd like to find or build a IMG wrapper that first shows a default background image from the local cache before showing the intended photo once it has loaded, similar to what Pinterest does (although Pinterest is even cooler and detects a color background that complements the image that's loading).

I have an app which loads a lot of photos - hundreds - and I would like to make the way they load in a feature rather than an ugly artifact of the browser.

Wouldn't it be cool if they looked liked this?

http://screencast.com/t/qlTUN9Z3MO

rather than like this

http://screencast.com/t/qlTUN9Z3MO

Can that be done?

4

1 回答 1

2

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

首先，您需要一个背景 svg。您可以使用简单的background-image: url(x.svg)语法，或者考虑使用 data-url。有一个免费的工具可以对它们进行编码。

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

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

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

于 2013-07-07T06:57:46.360 回答