在加载备用图像时显示另一个图像

Show an alternative image while another image loads

本文关键字：图像 显示 另一个 备用 加载      更新时间：2023-09-26

我有一个带有如下背景图像的div：

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

当我加载我的网页时，当我的大背景.gif图像加载时，有一秒钟的空白背景。我怎样才能拥有一个快速加载并在背景图像准备好取代它.gif后立即替换的替代图像？

您有两种解决方案。

  1. 您可以使用延迟加载图像。对于此解决方案，请查看有关堆栈溢出的此问题：延迟加载图像如何

  2. 如果图像足够小，则可以使用数据 URI 而不是指向图像的链接。这会将您的图像直接嵌入到 html 代码中，因此无需再加载任何内容。以下是有关如何将图像转换为数据 URI 的说明： http://www.abeautifulsite.net/convert-an-image-to-a-data-uri-with-your-browser/

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

相关文章：