打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
css-sprite适用的条件:对css-sprite的理解
最开始的时候,图片都是一张一张单独存在,需要哪张,就发送http请求来调用,随着时间的推移,background-position的应用,又兴起了css-sprite这种技术,一时之间大家都在盲目跟风,认为不这样做就不够专业,或者技术不够好等。

css-sprite是把所有用于网页背景的图片,拼合在一张大图之内,然后通过背景图定位的方法,来控制显示自己需要的那张图。但是不是所有的图片都适用css-sprite,例如网页内的图片,或者是需要重复平铺的图片。并且,这种大图一旦合并以后,如果以后再要修改其中的某一个图片,就要牵一发而动全身,如果只是简单颜色改变,或许还稍微容易一些,但是如果大图内的某些元素的尺寸变化了,就需要重新进行合并了,并且可能会导致其他图片的位置发生变化,从而演变成调整一个图片,还要同时调整大图内的其余图片,并且要调整css的background-position的数值。

并不是说css-sprite技术不好,只是什么时候需要用,什么时候不需要用,不能够一概而论的跟风,看人家网易用了,你也用!

css-sprite适用的条件:
1.网站的开发已经完毕,包括功能,模块,交互,程序,都已经反复测试,就差发布;
2.网站已经趋于完美,不会再三天两头的改动,不能说今天上线了,明天觉得按钮太小了,要调整,后天觉得按钮太大了要调整;
3.你的网站流量很大,需要尽量减少http的请求次数;

css-sprite也并不是像看起来那么简单的,只是单一的把图片拼合在大图上那么简单,首先你应该考虑,那些图片是需要每个页面都要引入的,这些图片可以拼合到一张大图中,而那些只有个别页面才需要调用的图片,则不适合也加在大图里面,否则你的http请求次数的确是小了,但是某些图片其实在某些页面是不需要用到的,但是你放在一张大图里面,用户还是需要去加载,造成了网速的负担。

另外,对于一些小公司,做一个产品没有一个合理的构思甚至框架,想到哪里就让人去做,想一步做一步,做一步改一步,改完一步,再改一步,改来改去没有最终敲定的,这个时候如果一开始就使用css-sprite拼合图片,无疑给自己造成了巨大的困扰,增加了许多的工作量。所以最好是,等到产品已经完全敲定,测试没有问题,可以上线发布了,再去拼合图片。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
CSS Sprite (CSS精灵)
CSS Sprites和Data URI技术在移动端的性能对比
CSS clip:rect矩形剪裁功能及一些应用介绍 ? 张鑫旭
前端进阶|Web前端性能优化
前端笔记 | CSS sprites 图片精灵在线生成器(CSS雪碧)
浅谈前端性能优化(五)——减少HTTP请求数
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服