显示替代图像，而另一个图像加载

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

当我打开我的网页上，有空白背景的一个恼人的第二，而我的大background.gif图像加载。我该如何去做一个快速加载的替代图像，并在background.gif图像准备就绪后立即替换它？

2016-02-13 vmpfc1

想要修改你的代码，如果你有任何。 – 2016-02-13 03:56:49

请提供一些代码！ – Microsmsm

你想要做什么被称为“图像延迟加载” 看看http://stackoverflow.com/questions/5582739/lazy-loading-images –

您有两种解决方案。

您可以使用图片的延迟加载。对于这个解决方案，看看这个问题在计算器上：Lazy loading images how
如果您的图片足够小，您可以使用data URI而不是链接到您的图像。这会直接将你的图像嵌入到html代码中，所以没有什么要加载的。以下是关于如何将图像转换为数据URI的说明：http://www.abeautifulsite.net/convert-an-image-to-a-data-uri-with-your-browser/

第一种解决方案可以解答您的问题。第二个不是，但它是解决同样问题的其他解决方案。

2016-02-13 04:05:59

回答