引导轮播：在 div 上使用背景图像而不是 img 时下载下一个图像答案

【问题标题】：Bootstrap carousel: Make download next image when using background-image on div instead of img引导轮播：在 div 上使用背景图像而不是 img 时下载下一个图像
【发布时间】：2014-03-31 02:26:58
【问题描述】：

前传：我正在使用 Bootstrap Carousel 。由于我想使用 background-size: 封面，所以我使用的是设置了 background-image 的 div，而不是默认的 .

问题：由于某种原因，轮播似乎没有预加载下一张图片。当我单击下一个图像时，我可以看到正在下载的图像。不幸的是，我认为由于缺乏预加载，图像在某些浏览器中的尺寸不正确（由 JS 设置）：

无论如何让它预加载轮播中的所有图像？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

这似乎工作得很好。只需将其与您的图像放在轮播之外的 url() 中即可。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

信用： http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

【讨论】：

【解决方案2】：

为例如创建一个类.preload 使用 display: none; 隐藏它，因为它不仅会隐藏元素，还会消除其在页面上的印象（高度/填充/边距/等）。

之后使用 .preload 类创建 div。 <div class="preload"></div> 低于 <body> 标签。这将强制它及其子元素在下面的任何内容被加载之前被加载。

现在您可以使用标签将图像添加到 div 中，它将最初加载但不会显示在预加载 div 中。

请参阅以下代码以更好地理解：

CSS：.preload{ display: none; }

HTML

<div class="preload">
<img src="preload-this-img-1.jpg" />
<img src="preload-this-img-2.jpg" />
<img src="preload-this-img-3.jpg" />
</div>

注意：搜索引擎可能不满意两次加载一张图片并且不在图片标签中使用alt=""，如果找到，我会更新解决方案

【讨论】：