复制代码
$(function () {
var icons = new Array();
var iconWidth = 16, iconHeight = 16, columns=16, rows = 15;
for (var i = 0; i < rows; i++)
{
for (var j = 0; j < columns; j++) {
var position = -iconWidth * j + ‘px ‘ + -iconWidth * i;
icons.push(‘<div class=”icon” style=”background-position: ‘ + position + ‘;”></div>’)
}
}
$(‘#test’).html(icons.join(”));
});
最终效果如下图
这样就实现了使用一张大图来代替很多小的icon图标，来减少HTTP请求，提高网站性能。
CSS小妖精额外福利
使用CSS splites还有一个额外的好处，如果我们使用的图标内容是透明的，而边框是白色（和网站背景颜色相同），我们可以通过简单的CSS来使整个网站的icon改变，这个在换theme的时候很贴心，关于这个的图提介绍可以看看CSS背景色镂空技术实际应用及进阶
