javascript - 背景图像是加载整个图像还是只加载可见部分？

Question

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

当动画开始时，javascript 函数会更改背景位置值，因此每 6 毫秒我们就会看到下一帧。

动画很流畅，但我在本地服务器上测试所有内容，所以我不知道:背景图像是加载整个图像还是只加载可见部分？

我的意思是，是否预加载了整个图像，或者某些浏览器以某种方式只加载了可见的 png 部分而不预加载其余部分？如果是这样的话，我会以其他方式预加载图像。

有人知道吗？

Answer 1

它最初加载整个图像。

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

我认为 sprite 的好处之一是只发出一个 HTTP 请求，然后根据位置显示不同的图形。

阅读本文的更多详细信息:

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

The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images.