基於CSS的圖片預加載器不起作用

我想創建一個預加載器，它會在顯示網站之前下載所有圖片，但後來我需要從<img>切換到CSS樣式的ul -s，之後停止工作 - 瀏覽器不等待圖像加載。基於CSS的圖片預加載器不起作用

HTML：

<head> 
[...] 
<ul id="imgPreLoader"> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
</ul> 
[...] 
</head>

CSS：

#imgPreLoader { 
display:none; 
} 

#imgPreLoader li:nth-child(1) { 
background-image: url('...'); 
} 

#imgPreLoader li:nth-child(2) { 
background-image: url('...'); 

} 

#imgPreLoader li:nth-child(3) { 
background-image: url('...'); 

} 

#imgPreLoader li:nth-child(4) { 
background-image: url('...'); 

}

來源

2013-08-26 van_folmert

當你說「瀏覽器不等待圖像加載」......你怎麼知道？當你看或測試它時究竟發生了什麼？你認爲應該發生什麼？ – andi

在顯示任何東西前，工作的預載器瀏覽器下載了大約1.2MB的網站，現在它只加載400kB，其餘的加載在瀏覽時看起來不太好。 –

你用什麼JS來檢測何時刪除顯示：none from #imgPreLoader？或者，也許我誤解了你的問題。你能發佈你的網站，還是一個精簡的例子？ – andi

這可能是因爲你已經設置display:none。我認爲許多瀏覽器不會加載背景圖像，即使它們將加載非顯示的img元素的源代碼也不顯示。

而不是設置display:none的，嘗試這樣的事情：

#imgPreLoader { 
    visibility:hidden; 
    position:fixed; 
}

這應該完成同樣的事情，因爲它會阻止顯示和影響佈局的元素，但它應該強制瀏覽器加載背景圖像。

來源

2013-08-26 13:52:23

仍然沒有運氣... –

我只能推測：
一）你<李>元素沒有關聯的非零區域，其中背景圖像可以推出
b）您綁定一些必要的事件處理代碼到<IMG> ，但不是<li>元素
等

來源

2013-08-26 13:56:00 mvw

基於CSS的圖片預加載器不起作用

回答

相關問題