javascript - 在加载另一张图片时显示另一张图片

标签 javascript html css background-image

我有一个带有这样背景图片的 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

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

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

关于javascript - 在加载另一张图片时显示另一张图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35375883/

相关文章:

html - 如何可靠地嵌入 wmv/mpg/avi/mov/etc 视频?

javascript - HTML5 可拖动图像 "selecting"并在 Firefox 中搞砸了我的拖动 JavaScript

php - 使用 XML API 在 eBay 上拉入类别

html - 在 HTML 中显示 SVG

javascript - 如何在禁用 Javascript 时编写 CSS 回退

javascript - 智能手机版本的自定义CSS

HTML/CSS 对齐单独 block 中的文本

javascript - Polymer 及其 Shadow DOM 中的 CSS 封装限制

javascript - 排序二维 Javascript 数组

javascript - Bootstrap : divs overlapping the jumbotron