防止圖像預加載？

我正在處理的網站有一個列表ul，上面有100個（li）項目符號。他們每個人都鏈接到另一個html網站。無論何時您將鼠標懸停在其中一個鏈接上，我都想要顯示圖像預覽。圖像應從左側緩慢滑入。防止圖像預加載？

由於每個預覽圖像的尺寸高達40kb，我其實不要想要預載圖像。什麼是防止它的最好方法？我想這樣做只能通過CSS，沒有JS，如果可能的話。

我的想法：

一）缺省狀態：<img> - 標籤與display:none;懸停狀態：它設置爲display:inline。問題：transition不display :(工作

B）簡單地用一個div，而不是寫一個CSS規則爲每li，使上懸停與預覽圖像對應的背景圖像被分配給它。。這是否會阻止圖像的預加載？

不，你需要JS來做到這一點。無論「顯示」如何，都會加載CSS圖像。 – 2012-03-14 18:45:05

如果您的CSS知道圖像路徑，瀏覽器可能會決定繼續並預加載它。懸停時顯示背景圖像似乎會阻止預加載，但僅在第一次加載時纔會預加載;之後大多數瀏覽器都會緩存它。請記住，'li：hover'在IE6中將不起作用，因此希望您不要將其作爲目標瀏覽器。 – 2012-03-14 18:46:08

只針對最新的IE，Firefox和Chrome版本。 – BlueHorizon 2012-03-14 18:47:48

如果您將其添加爲背景圖片，但僅在懸停時顯示該圖片，則只有在用戶懸停在任何具有該樣式的圖片上時，圖片纔會加載。你應該能夠設置背景圖像內聯，而不是輸出圖像文件作爲IMG

2012-03-14 18:47:34

謝謝您的肯定！我對此不太確定。像4MB的圖像預加載對我來說似乎是一種浪費，而最有可能只有5％會被定期使用。 – BlueHorizon 2012-03-14 18:50:38

您必須添加僅用於懸停的樣式，這會使標記有點雜亂，但它是可行的。您可以通過將大圖像設置爲懸停時的背景來輕鬆測試，然後在將鼠標懸停在其上時等待它加載。 – 2012-03-14 18:56:39

你不能用CSS來做到這一點，因爲你的瀏覽器會加載所有內容（不管display：none）。我會推薦JavaScript或服務器端像PHP一樣。

Maby jQuery的負載可能是什麼東西？ http://api.jquery.com/load/

2012-03-14 18:48:27 daker

Woudn't馬修達內爾的解決方案可以防止這種情況發生，還是不管它是否會被加載？ – BlueHorizon 2012-03-14 18:52:28

任何人在學習如何使用圖像精靈進行翻滾之前都會記得時間，並且獲得了關於圖像閃爍的第一個錯誤，這與您不同。 – 2012-03-14 18:53:25

BlueHorizon：我不能說100％肯定背景圖片，但我很確定它會加載反正。我不認爲。依賴於瀏覽器。馬修：你的意思是說，當你使用圖片精靈時，瀏覽器不會加載整個圖片？這不是真的。 – daker 2012-03-14 18:57:16

回答