延迟加载或巨大的CSS Sprite(大小为9MB)

问题描述

条件:

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

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

大约70％的图像将被加载到页面访问中

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

图片的有效期很长.

我想我会选择CSS精灵，因为大多数图像都会以任何方式由访问者加载.但是所有图像的CSS精灵均为9MB和15000x2000px.即使我将它分成3个精灵，它的大小也为3MB:S

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?

即使图像大小为3-9MB，浏览器也会缓存它们吗?

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

大像素尺寸对浏览器会不会有问题?

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

延迟加载或CSS精灵，我应该选择什么?

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

请给我建议！

推荐答案

是的，这会导致问题:

• 由于子画面的大小和尺寸，它将大大消耗cpu功率
• 如果您经常在一页上使用它，它甚至可以减少滚动，至少可以减少DOM操作
• 9MB太大，您是否有指向该精灵的链接?

如果标题设置正确，浏览器将对其进行缓存，这不是问题

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

并且您不想加载站点必需的9MB Sprite ！！！移动的 ?！?！！

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

Gekkstah

这篇关于延迟加载或巨大的CSS Sprite(大小为9MB)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！