Bootstrap輪播：在div而非img上使用background-image時，下載下一張圖像

Question

前傳：我正在使用Bootstrap Carousel。 由於我想使用background-size：cover，因此我使用的是帶有background-image設置的div，而不是default。

問題：由於某種原因，輪播似乎沒有預加載下一張圖片。 單擊下一張圖像時，可以看到正在下載的圖像。 不幸的是，我認為由於缺乏預加載，在某些瀏覽器中圖像無法獲得正確的尺寸（由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;將其隱藏display: none; 因為它不僅會隱藏元素，還會刪除其在頁面上的印象（高度/填充/邊距/等）。

之后，使用.preload類創建div。 <div class="preload"></div> <body>標記下的<div class="preload"></div> 。 這將迫使它及其子元素先加載，然后再加載以下內容。

現在，您可以使用標簽將圖片添加到div中，該圖片最初會加載，但不會顯示在preload div中。

請參考下面的代碼以更好地理解：

CSS： .preload{ display: none; } .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>

注意：搜索引擎可能不滿意兩次加載一張圖像並且不使用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