谈切图优化加速图片显示—淘宝实例
作者：ui163 来源：ui163.com 发布时间：2008-01-30 12:24:00
标签：CSS,Sprite,Sprite,切图,图片,淘宝
我们先看一下淘宝的页面：
这么一个庞然大物，该怎么切图呢？显然按照给出的方法也可以完成这项任务，但是做为前端开发的我们是否应该给自己提出更高的要求了，是否有更优化的解决方法呢？ 让我们看看淘宝的做法：
这个是淘宝首页的切图：
到这里我们也许恍然大悟了，但是这个只是表面的
至于为什么要针对ie和firefor而使用不同的的背景图片，也不太明白？如果有高手知道请赐教了
三个技巧(CSS Sprite)：
1. 图片限制(Image Slicing)
2. 单图转滚(Single-image Rollovers)
3. 延长背景(Extend Background Image)
0
投稿猜你喜欢
- 一.gb2312,gbk,utf8等支持多字节编码的字符集都可以储存汉字，gb2312中的汉字数量远少于gbk，而gb2312,gbk等都可
- 在对跨多个表格的数据进行组合时，有时很难搞清楚要使用哪一个SQL句法。我将在这里对将多个表格中的查询合并至单一声明中的常用方式进行阐述。在这
- 也许你刚刚来到一家公司，他们希望进行一些“可用性”工作。你可能是一名UI设计师，业务分析师，或前端开发人员，一名产品经理，或者负责用户体验部
- javascript动画效果 打开层/关闭层：运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD
- 某些杀毒软件会把正常的asp文件误认为是asp木马文件，而自动删除，影响正常使用。下面方法可能会有效避免被杀毒软件删除把dim t
- Oracle分页存储过程的思路于sqlserver的思路是一样的，但是我这里做了点改动，在因为Oracle的语法和规则的不同所以，Oracl
- 一：文字加粗 倾斜的代码文字加粗的代码是: <b>你好</b>文字倾斜的代码是: <i>你好！</
- 实际参数在函数中我们可以使用 arguments 对象获得 （注：形参可通过 arguments.callee 获得），虽然 argumen
- Oracle 背景资料 在介绍 Oracle9i 之前我们先介绍一些关于Oracle 公司的资料，让各位朋友更多了解 Oracle。 197
- 重复的数据可能有这样两种情况，第一种: 表中只有某些字段一样，第二种是两行记录完全一样。一、对于部分字段重复数据的删除 1.查询重复的数据
Dreamweaver MX 2004 试用试用心得：安装：选择工作界面(我选了默认的设计模式)初次启动，选择30天试用如果你也看到这个警告- 一个单步的动作，用了这个脚本，就可以重复执行100遍1000遍。上面就是一个路径描边100遍的效果，吼吼~ 不知道大家明白用处没有？（以前老
- 在工作实践和学习中，如何开启 MySQL 数据库的远程登陆帐号算是一个难点的问题，以下内容便是在工作和实践中总结出来的两大步骤，能帮助DBA
- 很高兴参加了这一期的薯片会，认识了几个朋友～～不料的却是今天我要来总结一下本次薯片会我们总共讨论了三个议题：A、 如何让“用户”更容易识别超
- <％ Function cutbadchar(str) badstr="不|文|明
- JavaScript图片水平翻转后垂直翻反转的特效一：<!--把下列代码加到body区域内--><SCRIPT langu
- 代码如下:arr = array(12,52,14,43,24,58,15,64,24,57,17,56,45)&nbs
- 某天和一个产品经理聊起：以用户为中心是一个理想概念。经历了太多的项目，看到了太多的限制条件。而我向来不是一个有着设计洁癖的完美主义者。做为所
- 不知道大家在做页面的时候会不会遇到样式定义不生效的问题，基本的表现就是怎么改样式都没显示或只有某些浏览器正常，这时通常需要做下面的几步：确认
- 判断函数如下：Public Function CheckBIG(strSource As String) As BooleanDim idx
