2012-07-09 83 views
2

的条件:延迟加载或巨大的CSS精灵(大小为9MB)

  • 这是一个电影网站有大约1000的所有图像的15KB

  • 大约70%的图像将被装上一次页面访问

  • 图像将有一个很长的失效日期。

我想我会选择CSS-sprites,因为大多数图片都会被访问者以任何方式加载。但所有图像的CSS-sprite都是9MB和15000x2000像素。即使我把它分成3个精灵它是3MB:S

也许这样的大精灵会导致一些问题?

浏览器会缓存图像,即使它们是3-9MB?

大像素尺寸是否会成为浏览器的问题?

延迟加载或CSS-sprite,我应该选择什么?

请指教!

+1

CSS spirites旨在提高性能......不考虑10 MB图像的情况。第一次它会真的拖累。在这种情况下,我认为懒加载会帮助你更好。或者如果你仍然想要做精神病,你可以按发生概率将精神分组。 – 2012-07-09 13:36:55

回答

0

是的,这会导致问题:

  • 由于精灵的大小和尺寸,它会显著消费CPU供电
  • ,如果你经常使用它在一个页面上,甚至有可能降低滚动和至少DOM操作操作
  • 9MB太大,您是否有链接到该精灵?

浏览器会缓存它,如果标头设置正确,这是没有问题的

而且你不想加载9MB雪碧是强制性的网站!手机?!?!!

Gekkstah

+0

有些情况下,9MB精灵将被视为罚款。我已经看到大概40MB的精灵......例如这个网站:http://middle-earth.thehobbit.com/ – vsync 2013-12-26 22:26:04