CSS背景圖片加載行爲

Question

假設對已設置的元素有一個css樣式聲明display:none（未在屏幕上顯示）並且它也具有背景圖像集。

可以說這個元素顯示在一個事件上，比如點擊鼠標。甚至在元素被顯示之前瀏覽器會加載這些圖像嗎？這種負載行爲在瀏覽器中是否一致？

Answer 1

不，我以前測試過的瀏覽器沒有。

如果您確實想要加載圖像，請嘗試使用background-position: -1000px -1000px，該功能可以正常工作。它不會顯示圖像，但會被預加載。但是，元素將處於正常流程中，即不隱藏。

Answer 2

未自動加載，但可以使用JavaScript技巧預加載圖像。

pic = new Image(); 
pic.src="http://url/imagetoload.png"; 

作爲更好的解決方案，可以創建具有負定位值一個div（諸如左：-1000px）並分配imagetoload.png到它的背景加載圖像。

Answer 3

關於此主題的信息不多，所以我使用a testpage by Steve Souders對webpagetest.org進行了一些測試。

事實證明的所有瀏覽器進行測試，僅Firefox不加載背景圖像與顯示：無。你可以see the test results on my blog here。