是背景圖像加載整個圖像或只是可見的部分？

Question

我有使用JavaScript和CSS的小動畫。我製作了一個由24幀組成的sprite png文件，並將該圖像作爲具有一幀高度和寬度的div格式的背景圖像。

動畫開始時，javascript函數正在改變背景位置值，所以每6毫秒我們就會看到下一幀。

動畫很流暢，但我在本地服務器上測試一切，所以我不能說：是背景圖像加載整個圖像還是隻是可見的部分？

我的意思是說，整個圖像是預加載的，還是某些瀏覽器，加載的只是可見的png的一部分，並且不會預先加載休息？如果是這樣，我會用其他方式預加載圖像。

有人知道嗎？

Answer 1

它最初加載整個圖像。

您的CSS正在爲該文件發出HTTP請求，然後您的CSS正在設置此圖像的位置。

我相信精靈的好處之一就是隻有一個HTTP請求被創建，然後根據定位顯示不同的圖形。

閱讀這篇文章的更多細節：

http://css-tricks.com/158-css-sprites/

當時的想法是計算機能夠讀取圖形到內存中，並在同一時間，這是圖像的 則僅顯示部分要比連續獲取新圖像的 更快。