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

Question

Prequel: I am using Bootstrap Carousel . 前传：我正在使用Bootstrap Carousel。 Since I want to use background-size: cover, I am using a div with background-image set, instead of the default . 由于我想使用background-size：cover，因此我使用的是带有background-image设置的div，而不是default。

The issue: For some reason, the carousel doesn't seem to preload the next image. 问题：由于某种原因，轮播似乎没有预加载下一张图片。 When I click next image, I can see the image being downloaded. 单击下一张图像时，可以看到正在下载的图像。 Unfortunately, I think because of this lack of preloading the images aren't getting the right size (Set by JS) in some browsers: 不幸的是，我认为由于缺乏预加载，在某些浏览器中图像无法获得正确的尺寸（由JS设置）：

Anyway to make it preload all the images in the carousel? 无论如何要使其将所有图像预加载到轮播中？

Answer 1

This seems to work great. 这看起来很棒。 Just place this with your images in the url() outside of the carousel. 只需将其与图像一起放在轮播之外的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; }

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

Answer 2

Create a class for eg .preload hide it using display: none; 创建一个类，例如.preload使用display: none;将其隐藏display: none; as it will not only hide element but also remove its impression on page(height/padding/margin/etc). 因为它不仅会隐藏元素，还会删除其在页面上的印象（高度/填充/边距/等）。

after that create div with .preload class. 之后，使用.preload类创建div。 <div class="preload"></div> below <body> tag. <div class="preload"></div> <body>标记下的<div class="preload"></div> 。 That will force it and its child elements to get loaded before anything below gets loaded. 这将迫使它及其子元素先加载，然后再加载以下内容。

Now you can add your images using tag into the div and it will load initially but won't display in preload div. 现在，您可以使用标签将图片添加到div中，该图片最初会加载，但不会显示在preload div中。

Refer below code for better understanding: 请参考下面的代码以更好地理解：

CSS: .preload{ display: none; } CSS： .preload{ display: none; } .preload{ display: none; }

HTML 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>

Note: Search engines may not be happy with loading one image two times and not using alt="" in image tag, I will update with solution for it, if found 注意：搜索引擎可能不满意两次加载一张图像并且不使用image标签中的alt="" ，如果找到，我将为其提供解决方案

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-04-04 23:09:39

解决方案2
1 2015-09-20 10:45:46

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-04-04 23:09:39

解决方案2 1 2015-09-20 10:45:46

解决方案1
2 已采纳 2014-04-04 23:09:39

解决方案2
1 2015-09-20 10:45:46