2

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

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

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

我的意思是,是预加载了整个图像,还是某些浏览器以某种方式仅加载了可见的 png 的一部分并且不预加载其余部分?如果是这种情况,我会以其他方式预加载图像。

有人知道这个吗?

4

1 回答 1

2

它最初加载整个图像。

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

我相信精灵的好处之一是只发出一个 HTTP 请求,然后根据位置显示不同的图形。

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

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

这个想法是计算机可以将图形提取到内存中,然后一次只显示该图像的一部分,这比不断地获取新图像要快。

于 2011-08-12T10:29:34.010 回答