在加载另一张图片时显示另一张图片 [英] Show an alternative image while another image loads

问题描述

我的div带有这样的背景图片:

I have a div with a background image like this:

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

当我加载网页时，我的大background.gif图像加载时会有一秒钟令人讨厌的空白背景.我该如何去做一个备用图像，该图像可以快速加载并在background.gif图像准备就绪时就被替换?

When I load my webpage, there's an annoying second of blank background while my large background.gif image loads. How can I go about having an alternative image that loads quickly and is replaced as soon as the background.gif image is ready to take its place?

推荐答案

您有两种解决方案.

1. 您可以使用图像的延迟加载.对于此解决方案，请查看关于stackoverflow的以下问题:延迟加载图像的方式

如果图像足够小，则可以使用数据URI 而不是指向您图像的链接.这将直接将您的图像嵌入html代码中，因此无需加载其他内容.这是有关如何将图像转换为数据URI的说明:

And if your image is small enough, you can use a data URI instead of a link to your image. This will embed directly your image inside the html code, so there is nothing more to load. Here is a description on how you can convert your image to data URI: http://www.abeautifulsite.net/convert-an-image-to-a-data-uri-with-your-browser/

第一个解决方案回答了您的问题.第二个不是，但这是解决同一问题的另一种方法.

The first solution answers your question. The second one does not, but it is an other solution to the same problem.

这篇关于在加载另一张图片时显示另一张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！