Question

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?

Answer 1

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.