在加载另一张图片时显示另一张图片
Show an alternative image while another image loads
我有一个 div 的背景图片是这样的:
<div class="carousel-image"
style="background: url(img/background.gif) no-repeat center center;">
</div>
当我加载我的网页时,在我的 background.gif 大图像加载时出现令人讨厌的空白背景。我怎样才能拥有一个可以快速加载并在 background.gif 图像准备好取代它的位置时立即被替换的替代图像?
你有两个解决方案。
您可以延迟加载图像。对于此解决方案,请查看 Whosebug 上的这个问题:Lazy loading images how
如果你的图片足够小,你可以使用 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/
第一个解决方案回答了你的问题。第二个没有,但它是同一问题的另一种解决方案。
我有一个 div 的背景图片是这样的:
<div class="carousel-image"
style="background: url(img/background.gif) no-repeat center center;">
</div>
当我加载我的网页时,在我的 background.gif 大图像加载时出现令人讨厌的空白背景。我怎样才能拥有一个可以快速加载并在 background.gif 图像准备好取代它的位置时立即被替换的替代图像?
你有两个解决方案。
您可以延迟加载图像。对于此解决方案,请查看 Whosebug 上的这个问题:Lazy loading images how
如果你的图片足够小,你可以使用 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/
第一个解决方案回答了你的问题。第二个没有,但它是同一问题的另一种解决方案。