是背景图像加载整个图像或只是可见的部分？

Question

我有使用JavaScript和CSS的小动画。我制作了一个由24帧组成的sprite png文件，并将该图像作为具有一帧高度和宽度的div格式的背景图像。

动画开始时，javascript函数正在改变背景位置值，所以每6毫秒我们就会看到下一帧。

动画很流畅，但我在本地服务器上测试一切，所以我不能说：是背景图像加载整个图像还是只是可见的部分？

我的意思是说，整个图像是预加载的，还是某些浏览器，加载的只是可见的png的一部分，并且不会预先加载休息？如果是这样，我会用其他方式预加载图像。

有人知道吗？

Answer 1

它最初加载整个图像。

您的CSS正在为该文件发出HTTP请求，然后您的CSS正在设置此图像的位置。

我相信精灵的好处之一就是只有一个HTTP请求被创建，然后根据定位显示不同的图形。

阅读这篇文章的更多细节：

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

当时的想法是计算机能够读取图形到内存中，并在同一时间，这是图像的 则仅显示部分要比连续获取新图像的 更快。