15.5. 图片优化
本文共 1152 字，大约阅读时间需要 3 分钟。
15.5.1. onMouseOver/onMouseOut
我们在网站冲浪常常看会看到很多图片按钮，当鼠标入上去或鼠标移开图片会随之改变，这个的按钮至少需要三张小图片才能实现这样的功能。
我先说说这样做的缺点
-
三张图片，你的浏览器会启动三个线程链接你的图片服务器，不划算。
-
一旦其中一幅图片下载过程中中断，用户当把鼠标放到按钮上时，可能会出现一个红叉叉。
-
图片太多不好维护，易产生垃圾，占用磁盘空间，linux ext3一个空文件占用2048
最优方法是使用一张图片，将三幅图片平行或垂直排开，放到一幅图片中，然后使用CSS控制显示你需要的部分。
15.5.2. 使用一幅图片处理BLOCK四角
corner.gif
stylesheet
HTML
You Content
下面是一个更复杂的例子
- corner.gif
- block_title_left.gif
- block_title_right.gif
stylesheet
HTML
TitleContent
15.5.3. 图片用背景图代替 img 标记
图片用背景图代替
15.5.4. 合并图片
下面是摘取LinkedIn网页,作为例子.
合并多张小图片为一张图片,然后通过偏移量取其中一部分显示,这样做的目的是,加快浏览器下载速度,降低与服务器建立连接的开销.
LinkedIn Blog
你可能感兴趣的文章
我的友情链接
查看>>
Java 使用 Redis
查看>>
JPA常用注解
查看>>
Maven学习总结（6）——Maven与Eclipse整合
查看>>
HTML5：理解head
查看>>
oracle
查看>>
java SpringUtil获取bean
查看>>
赛门铁克开启“容灾即服务”时代
查看>>
复杂度归纳--小结
查看>>
PHP学习笔记 第八讲 Mysql.简介和创建新的数据库
查看>>
js获取鼠标位置
查看>>
Mysql
查看>>
跨越企业的“中等收入陷阱”
查看>>
Android 开发者必知的开发资源
查看>>
软件工程技术基础-（软件复用技术）
查看>>
给django视图类添加装饰器
查看>>
luogu P1280 尼克的任务 序列DP
查看>>
sys.check_constraints
查看>>
vue问题
查看>>
php 引入其他文件中的变量
查看>>