Question

前传：我正在使用Bootstrap Carousel。由于我想使用background-size：cover，我使用的是带背景图像集的div，而不是默认值。

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

无论如何要让它预先加载旋转木马中的所有图像？

Answer 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/

Answer 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=""，我会更新解决方案，如果找到了

Bootstrap轮播：在div上使用background-image而不是img时下载下一张图像

2 个答案: