在加载另一张图片时显示另一张图片答案

【问题标题】：Show an alternative image while another image loads在加载另一张图片时显示另一张图片
【发布时间】：2016-02-13 14:24:16
【问题描述】：

我有一个带有这样背景图像的 div：

<div class="carousel-image" 
     style="background: url(img/background.gif) no-repeat center center;">
</div>

当我加载我的网页时，在加载我的大 background.gif 图像时，会出现一秒钟令人讨厌的空白背景。我怎样才能获得一个可以快速加载并在 background.gif 图像准备好取而代之时被替换的替代图像？

【问题讨论】：

【解决方案1】：

你有两个解决方案。

您可以使用延迟加载图像。对于此解决方案，请查看 stackoverflow 上的此问题：Lazy loading images how
如果您的图片足够小，您可以使用data URI 代替图片链接。这会将您的图像直接嵌入到 html 代码中，因此无需加载更多内容。以下是关于如何将图像转换为数据 URI 的说明：http://www.abeautifulsite.net/convert-an-image-to-a-data-uri-with-your-browser/

第一个解决方案回答了您的问题。第二个没有，但它是同一问题的另一种解决方案。

【讨论】：