把小图片都集中到一张大图片中？思路新颖，但效果一般
授权方式：署名，非商业用途，保持一致，转载时请务必以超链接(http://www.fwolf.com/blog/post/201)的形式标明文章原始出处和作者信息及本声明。94smart说yahoo的新版网站中，有一个不错的设计，就是把很多小的图标、背景图片都存储到一张大图片中，然后用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;
}
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那样直接指定坐标范围，所以虽然是借鉴单机软件编程中的一个小技巧，思路比较新颖，但实际效果一般，个人认为不建议在实际开发中使用。
No tags for this post.
Save to Browser Favorites
Ask
backflip
blinklist
BlogBookmark
Bloglines
BlogMarks
Blogsvine
BUMPzee!
CiteULike
co.mments
Connotea
del.icio.us
DotNetKicks
Digg
diigo
dropjack.com
dzone
Facebook
Fark
Faves
Feed Me Links
Friendsite
folkd.com
Furl
Google
Hugg
Jeqq
Kaboodle
linkaGoGo
LinksMarker
Ma.gnolia
Mister Wong
Mixx
MySpace
MyWeb
Netvouz
Newsvine
PlugIM
popcurrent
Propeller
Reddit
Rojo
Segnalo
Shoutwire
Simpy
sk*rt
Slashdot
Sphere
Sphinn
Spurl.net
Squidoo
StumbleUpon
Technorati
ThisNext
Webride
Windows Live
Yahoo!
Email This to a Friend
If you like this then please subscribe to the 
September 6th, 2006 at 10:23:44
中文称滑动门。好处是从cache 读此图片，不需要多次 preload。国外站点实际中使用很多。
[Reply]