简单地说:节省网络请求.一个10kB精灵的请求在网络上要比10个1kB图像的十个请求快得多.
此外,一个压缩的图像精灵将在网络上产生巨大的节省.例如,拍摄13张图像,每张图像大约4kB.这是13个网络请求的52kB.通过spriting,可以通过1个网络请求将其降至12kB的1个图像.巨额储蓄!
您不必自己制作精灵 - Moovweb可以自动为您生成精灵.
在images目录中创建一个名为sprite的文件夹- 将所有图像放在此处.(你可以在sprites文件夹中有多个文件夹.)Moovweb自动生成精灵并在stylesheets/globals目录中创建一个样式表.不要忘记导入此样式表._sprites.scssmain.scss
例如,要创建包含来自站点的所有小猫图片的精灵,请将所有小猫图像放在images文件夹中名为sprite的文件夹中.Moovweb在images文件夹中创建了一个更大的精灵图像.它还_sprites.scss在stylesheets/globals文件夹中创建样式表.
在样式表中,Moovweb为每个图像定义了一组类,混合和变量.他们的名字格式是sprites-filename.例如,在上面的sprite文件夹示例中,cat.pngsprites文件夹中的图标将具有该类.sprites-cat.
您可以通过以下三种方式之一使用图像:
在样式表中使用@extend或@include在其他类/ id下应用图像中的相同样式
使用Tritium插入一个带有图像类的新元素: insert("div", class:"sprites-filename")
使用Tritium将现有元素添加到现有元素: add_class("sprites-filename")