logo标签列表

懒加载或巨大CSS雪碧图（大小为9MB）

lazy-loadingspritecss-sprites
3

条件:

  • 这是一个电影网站，大约有1000张大小为15kb的图片

  • 大约70%的所有图片将在页面访问时加载

  • 图片将具有较长的过期日期。

我认为我会选择CSS雪碧图，因为大多数图片都会被访问者加载。但是所有图像的CSS雪碧图大小为9MB，并且为15000x2000px。即使我将其分成3个雪碧图，它也有3MB:S

也许如此大的雪碧图会引起一些问题吗？

即使它们是3-9MB，浏览器是否会缓存图像？

大像素尺寸对浏览器有任何问题吗？

懒加载或CSS雪碧图，我应该选择哪一个？

请给我建议！

1
CSS精灵旨在提高性能...但不考虑10 MB图像的情况。第一次加载会非常缓慢。在这种情况下，我认为延迟加载会更好。或者如果您仍然想使用精灵，可以按出现概率对精灵进行分组。 - web-nomad
1个回答
0

是的，这会引起问题：

  • 由于精灵大小和尺寸，它将显著消耗CPU功率
  • 如果您在一个页面上经常使用它，甚至可能会减少滚动和至少DOM操作
  • 9MB太大了，您有该精灵的链接吗？

如果头文件设置正确，浏览器将缓存它，这不是问题

而且你不想加载一个对网站来说必不可少的9MB精灵！！！移动设备？！？！

Gekkstah

有时候，9MB的精灵图可能会被认为是可以接受的。我曾经看到过大约40MB的精灵图...例如这个网站：http://middle-earth.thehobbit.com/ - vsync
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接