biaoge's blog

我们经常会遇到鼠标划过链接时需要改变背景图的情况，其实做起来挺简单，就是给链接的:hover伪类设置一张背景图。但这是问题便出现了，设置在:hover下的背景图并没有随html文档一同被载入，而是在我们把鼠标放在链接上时才开始像服务器发出请求。

例如，如果我们在一个a链接上写了以下样式：

a.test {
    background: url(images/bgImg.png) no-repeat;
}
a.test:hover {
    background: url(images/bgImgHover.png) no-repeat;
}

那么当用户把鼠标移到a链接上时，原先设置在a上的背景图消失了，而设置在:hover上的背景图bgImgHover.png又正在载入，这是就会出现没有背景图的瞬间，这种用户体验是很糟糕的，特别是当背景图比较大时，可能还不止是一瞬间，用户需要等上一段时间才能见到背景图。

解决这个问题的办法是预载背景图，就是说强迫设置在hover上的背景图随HTML文档一起被载入，这样当用户的鼠标放到链接上时:hover上的背景图已经被下载到本地，也就不会出现上述的情况。下面提供几种方法：

方法一：采用CSS Sprite技术

CSS sprite技术是一种将许多小背景图合成到一张大图以减少http连接数从而提升页面载入速度的技术。用过YSlow的人都知道Yahoo把减少HTTP连接数列为提高网站速度效率的第一要素。但此处采用sprite是为了解决预载:hover背景图的问题，将:hover背景图与任意一张非hover、非active、非focus下的背景图合成到一张图片，这样图片就会随html文档一起被载入。

方法二：将需要预载的背景图设置在文档内任意一个元素上，并通过backgroud-position让其不可见

文档内有如下html代码：

	<li class="test"><a href="#">test</a></li>

css代码如下：

.test {
	/* 把li的背景设置成这张需要预载的图片，但是让其不可见 */
	background:url(images/bgImgHover.png) no-repeat -999px -999px;
}
.test a {
    background:url(images/bgImg.png) no-repeat;   /* 正常状态下的背景图 */
}
.test a:hover {
    background:url(images/bgImgHover.png) no-repeat;       /* hover状态下的背景图 */
}

由于在li上设置了bgImgHover.png这张背景图，尽管我们看不到它，但是图片在文档载入之前就已经下载到了本地。

方法三：用JavaScript预载图片

有些时候假如我们需要预载的图片有十几张，并且由于种种原因我们无法使用Sprite的时候，用JavaScript便成为更好的选择。

<script type="text/javascript">
    for ( var i = 1; i <= 15; i++ ) ( new Image() ).src = './images/bgImg' + i + '.png';
</script>

这样会预载从bgImg1.png,bgImg2.png…直到bgImg15.png。

《无懈可击的web设计》这本书讲了许多提高网站灵活性、可维护性和可访问性的一些小技巧，读过之后发现里面讲的许多方法都是以前没有注意到的，所以有必要对其中的一些内容做一个小小的归纳总结，一方面可以加深印象，另一方面也可以作为一个备忘录以便将来查阅。

1.用关键字和百分比来确定文字大小以便使用户也能控制其大小，并且最大化网页的灵活性。

在body上使用font-size:small来设置全局的文字大小，然后在其他地方全部用百分比来控制，这样不仅可以使得IE用户可以通过菜单栏的“查看>文字大小”来控制文字大小，而且以后要对文字大小进行调整的时候只需要调整一条声明就可以让整个网页的文字大小按比例缩放，使得灵活性大大提高。

2.让导航菜单能够适应任意的文字大小和任意多的内容。

对导航菜单既不要定宽也不要定高，对于菜单内文字和边缘之间的间隙则用padding来填充，这样就适应了任意的文字大小和任意多的内容，对于滑动门菜单也是如此，我以前在写滑动门的时候习惯把高度定死，这并不是一个好习惯。此处还要注意的是如果背景图是渐变效果则要将背景图适当地加长和加高以适应各种长度和高度的内容。

3.用em来作为line-height的单位，同样的，对于两行文字之间margin值也用em为单位。

用em做单位的好处是当文字大小改变的时候此处的line-height和margin也会相应地改变。

4.对一些水平的区块也不要定高，让其高度自适应。

一些水平区块如头部、登录区、搜索区和一些单行文字的区域也不要定高，一方面是为了适应文字大小的变化，另一方面也使得以后在该区块增加内容后不至于使页面变形，例如单行的文字有可能在以后增加到两行。所以以前通过定高度和行高来处理单行文字的做法要改为不定高度并用padding填充文字上下的空白区域。

5.确保页面在禁用图片和CSS的时候仍然不影响正常阅读。

背景图未加载有可能造成文字和下面的背景颜色太接近而使网页阅读困难，解决方法是在凡是有背景图的地方都写上一个背景颜色。作者把裸奔测试称为“十秒钟可用性测试”，就是禁用CSS之后再看页面结构是否清晰，这就要求做好HTML的语义化。一些方便做此类测试的小工具：

• FAVELETS 实际上就是一些JavaScript代码写成的书签
• Web Developer Toolbar For Firefox
• Web Accessibility Toolbar For IE

6.用border-collapse:collapse;实际上可以替代talble上的属性cellspacing=0，唯有IE/MAC不支持border-collapse，但是IE/MAC现在可以忽略掉了吧。

7.在使用百分比宽度的流体布局中为栏间设定固定像素间距的方法是在每栏的里面加入一个div并在这个里层的div上加上padding。

8.即便是对使用百分比宽度的流体布局也可以使用背景图垂直重复的方法来造成貌似两栏等高的假象，方法是将背景图的水平位置也用百分比来设置。