Lazy Load or HUGE CSS-sprite (9MB in size)

问题

The conditions:

• It's a movie website with approximately 1000 images of 15kb

• Approximately 70% of all images will be loaded on a page visit

• Images will have a long expiry date.

I think I will chose CSS-sprites because most images will be loaded by the visitors any way. But the CSS-sprite of all images are 9MB and 15000x2000px. Even if I devide it into 3 sprites it's 3MB :S

Maybe such big sprites will cause some problems?

Will images be cached by the browser even if they are 3-9MB?

Will the big pixel dimensions be any problem for the browser?

Lazy load or CSS-sprite, what should I chose?

Please advice me!

回答1:

Yes this will cause problems:

• Due to the sprite size and dimensions, it will significantly consum cpu power
• if you use it often on one page, it could even decrease scrolling and at least DOM manipulation actions
• 9MB is too big, do you have a link to that sprite ?

The browser will cache it, if the headers are set correct, that is not the problem

And you dont want to load a 9MB Sprite that is mandatory for a site !!! Mobile ?!?!!

Gekkstah

来源：https://stackoverflow.com/questions/11395911/lazy-load-or-huge-css-sprite-9mb-in-size