把小图片都集中到一张大图片中?思路新颖,但效果一般

94smartyahoo的新版网站中,有一个不错的设计,就是把很多小的图标、背景图片都存储到一张大图片中,然后用css控制显示范围来达到“使用”但张小图片的效果。乍一看很不错,但仔细分析后我觉得不见得非常实用,并且看yahoo其他的页面,也并没有广泛应用这种方式,更多的还是切割之后的小图片,集中到大图片的设计也许只是开发测试阶段的权宜之计?

实现方式大体如此(以<a class=”slideshow”为例):首先将大图片定义为背景

.more, .bullet, .audio, .video, .slideshow, .search, #minimantle li, a#editpage, a#editpage.on{ background-image:url(http://us.i1.yimg.com/us.yimg.com/i/ww/thm/1/icons_1.1.gif); background-repeat:no-repeat; }

其中icons_1.1.gif就是一张包含有众多小图片的大图片,其中甚至还留有充分的空余,可能是为了存放修改后的小图标预留的。

然后定义slideshow class背景的位置,当然是指定大图片中小图标的坐标了:

.slideshow{background-position:-3px -151px;}

这样,结合以slideshow为class的object外部盒子模型,在定义了背景及其偏移位置之后,我们就“恰好”只能看见背景图中露出一个完整的小图标。

大体想了一下,这样作的优点有:

  • 文件数量少了,和分散的小文件相比总体积增加并不多,但却减少了访问时对服务器的请求次数,有利于优化速度。
  • 对于开发代码管理来说,大的文件在命名、管理上要更有条理一些。
  • 图标改进更换无须增加新的文件,只需在大图片的预留空处放置,并修改相应css定义即可(妙!)
  • web服务器的log文件会小很多。

但是也存在一些缺点:

  • 在css的盒子模型中,一定要记得“遮住”无须显示的部分,增加了编码复杂度。
  • 不知道有很多这样把大图片作为background的网页,浏览器处理时间和占用内存是否会有明显增加,因为有时即使是不显示出来的内容也要占用系统资源的。

所以综合考虑下来,由于只能使用css遮盖的方式实现显示目的,不能像map那样直接指定坐标范围,所以虽然是借鉴单机软件编程中的一个小技巧,思路比较新颖,但实际效果一般,个人认为不建议在实际开发中使用。

One thought on “把小图片都集中到一张大图片中?思路新颖,但效果一般”

Leave a Reply

Your email address will not be published. Required fields are marked *