Is background-image loading whole image or just visible part?

I have small animation using javascript and css. I made one sprite png file, composed of 24 frames, and put that image as background-image in div which has height and width of one frame.

When animation starts, javascript function is changing background-position values, so every 6 miliseconds we see next frame.

Animation is smooth, but I'm testing everything on local server, so I can't tell: is background-image loading whole image or just visible part?

What I mean is, is whole image preloaded, or some browsers, somehow, load just part of png that's visible and don't preload rest? If that'开发者_开发问答s the case, I'll preload image some other way.

Anybody knows this?

Its loading the whole image initially.

Your CSS is making a HTTP request for that file, and then your CSS is styling the position of this image.

I believe one of the benefits of a sprite is that only one HTTP request is made, which is then used to display different graphics depending on positioning.

Read more details on this article:

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.