让你显示一个天气图标你会怎么显示呢？让你做一个简单的动图你会怎么采用什么方式呢？让你输出一个长期固定的图标列表你会怎么编写代码呢？

如果不管性能，不用css，不用js，可能你会这么写html：

<

类似这样便是最原始的图片序列编写方式。然而即使有emmet加持，这种编写仍然费功夫而且浏览器的请求次数变多，网页更容易延迟。而使用精灵图的方法则可以更高效解决上述问题。

介绍一下精灵图：就是把多张小图片拼接成一张大图片，通过定位，设置X，Y轴坐标的值，并让超出部分隐藏，这样就可以显示图片的局部，也就是我们想要的部分，这样做有利于页面优化，当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。所以对于小图标列表表单来说，精灵图是一个是十分舒服的一种方式。

用css 定义一个4排的图标阵列。

<

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，一堆图标只用请求一次。，background-position 可以用数字精确的定位出背景图片的位置。

然后通过JavaScript改变不同不同位置的显示，就有点像放着一个相框和一个背景，然后每移动一次背景，在相框中可以看到不同的图像。

JavaScript编写如下

<

通过循环改变图片显示的不同坐标，起到了“移动背景布”的作用。

最后输出结果类似这样：

CSS Sprites 看上去十分愉快，同上面的html简单方法显示一样，能很好地减少网页的http请求，从而大大的提高页面的性能，而代码也简洁大方。

而比如天气图标也可以这样修改。让精灵图包括晴雨雪等图标，然后当传入天气信息时便可以改变。

还有rpg游戏中的人物移动时的图片变换，都可以使用这种办法。

关键词：html+css+js 精灵图