一. 为什么要使用sprite （雪碧图）

二. CSS雪碧图原理及应用

三. 生成雪碧图的三种实现方式

一.为什么要使用雪碧图

在开发过程中，我们需要用到很多图标，这些图标的大小不是很大，但是每次需要向服务器发送请求，从而加重服务器的负担，尤其是当网站处于高访问量的情况下或网络不稳定的时候，服务器性能会明显下降。这种情况不符合被广泛遵循的雅虎军规“尽量减少HTTP请求数”的要求

例如当我们引入如图的4个各不到1k的小图片还占用了4个请求，这显然非常浪费服务器资源

二.CSS雪碧图原理及应用

1.css方法是将小图标和背景图像合并到一张图片上，这样每个元素都会以该合成图为背景，而且页面也只加载一张合成图

然后利用CSS的背景定位（background-position）来显示需要显示的图片部分。

其中要用到 background-image，background-position

其中如下图背景图左上角默认和容器框重合的，现在也就是默认会显示第一个图片，现在想要显示第二个图片就需要把background-image 左移动一个（也即是X轴负方向）所以显示的{x:-60px;y:0px}

合并图片方法有很多，图片合并软件，在线合并以及 glup webpack工具

方法一
这里提供一个很好用的在线的图片合并网站
http://csssprites.com/可以根据自己的需要添加边距等等，还会生成对应的参考css 如图

使用时候直接引入css 文件 ，定义好对应类名  即可

<div className='icon bg-icon1'></div>
<div className='icon bg-icon2'></div>
<div className='icon bg-icon3'></div>

方法二目前大多数前端项目都采用 webpack打包同时可以使用webpack-spritesmith 插件

主要用到：

webpack
webpack-spritesmith插件
file-loader
sass-loader (因为 webpack-spritesmith 除了生成雪碧图之外，还会生成相应的 mixin ，使用起来很方便，所以要用 sass )

webpack配置如下

const path = require('path');
const SpritesmithPlugin = require('webpack-spritesmith');module.export = {// ...module: {rules: [{test: /png$/loader:['file-loader?name=i/[hash].[ext]']},{test: /\.(css|scss)$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ['css-loader', 'postcss-loader', 'sass-loader']})}]},resolve: {modules: ['node_modules','assets' //css在哪里能找到sprite图   文件夹的名字]},plugins: [new SpritesmithPlugin({src: {cwd: path.resolve(__dirname, 'src/ico'),  //准备合并成sprit的图片存放文件夹glob: '*.png'  //哪类图片},target: {image: path.resolve(__dirname, 'src/assets/sprites.png'),  // sprite图片保存路径css: path.resolve(__dirname, 'src/assets/_sprites.scss')  // 生成的sass保存在哪里（也可以后缀改成.css 直接生成css文件,在文件中直接使用对应的类名即可）},apiOptions: {cssImageRef: "sprite.png" //css根据该指引找到sprite图}})]
}

注：这是纯webpack的配置的情况，现在很多项目才用create-reactp-app 方式创建的，上面配置的中rules 部分已经嵌入，可以省略。

下面执行npm start 命令会在sprite文件夹生成 sprite.png sprite.scss

除了对应的数据外，sass文件中自动生成 mixin 如下

//webpack 自动生成的scss文件$icon1-name: 'icon1';
$icon1-x: 0px;
$icon1-y: 0px;
$icon1-offset-x: 0px;
$icon1-offset-y: 0px;
$icon1-width: 32px;
$icon1-height: 32px;
$icon1-total-width: 158px;
$icon1-total-height: 32px;
$icon1-image: '../sprite/sprite.png';
$icon1: (0px, 0px, 0px, 0px, 32px, 32px, 158px, 32px, '../sprite/sprite.png', 'icon1', );//数据略...@mixin sprite($sprite) {@include sprite-image($sprite);@include sprite-position($sprite);@include sprite-width($sprite);@include sprite-height($sprite);
}

在自己的sass文件中如下引用就可以快乐的使用了，

//直接在页面中引入的scss文件@import '../sprite/sprite.scss';//生成的尺寸默认是原图大小  如何动态的缩放图片  如下 @mixin spriteScale($sprite,$scale) {$spriteScaled: ();$scaleItems: (3, 4, 5, 6, 7, 8);@for $i from 1 through length($sprite) {$item: nth($sprite, $i);@if (null != index($scaleItems, $i)) {$spriteScaled: append($spriteScaled, $item * $scale);} @else {$spriteScaled: append($spriteScaled, $item);}}@include sprite($spriteScaled);background-size: nth($spriteScaled, 7) nth($spriteScaled, 8);
}//注释： spriteScale 把雪碧图位置以及size涉及的尺寸 scale同样的倍数@mixin sprite_dynamic ($arg1,$arg2,$scale){@include spriteScale($arg1 ,$scale)@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio: 3){@include spriteScale($arg2 ,$scale)}
}注释：sprite_dynamic 通过@media查询 ，加载2X图或者3X ，$arg1 $arg2,$scale 分别是 2X 3X图变量名  缩放倍率，具体用法如下.icon1{@include sprite_dynamic($wifi_2X,$wifi_3X ,1);
}注释 ：最后在需要的类里面引用  $wifi_2x $window_3X

保存刷新页面，图片有显示了，但是此时network一个图片请求都没有了，在看element dom节点，webpack 把背景图片转码为base64

这样以后添加或者去掉一个图标，只更改少量代码，运行npm runbuild 或者npm start 就ok 的

动态加载 2X &3X图原理如下动态加载2X&3X

一键生成sprite（雪碧图）以及动态加载1X 2X3X 图片相关推荐

Android一键生成包含.dex的Jar及动态加载方案
Android一键生成包含.dex的Jar及动态加载方案背景:谈到动态加载相信很多小伙伴都会想到热更新及动态加载dex 的技术,最近也因为项目重构的需求,折腾了下这方面的技术点,以前研究过但时 ...
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
SVG进阶-sprite 雪碧图
前言由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不用分辨率.不用担心模糊和锯齿.同时还能更改图标的填充颜色. CSS sprite 和SVG Sprite 传统的 ...
CSS Sprite——雪碧图
CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backg ...
雪碧图PHP,Css Sprite(雪碧图、精灵图) - SegmentFault 思否
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
雪碧图的原理与实例解释
一.原理 1.多个图标组合成一张图片构成雪碧图,通过对不同部位的提取,实现不同效果显示如下图(图1): 2.雪碧图优点:加载一张图片在来对一张图片操作,相比于加载多张图片来说,占用资源更少,效率更快 ...
webpack雪碧图生成
原文链接:http://dopro.io/webpack-sprites.html 前言在HTTP/2.0还没有普及的现在,css sprite(雪碧图)仍是前端工程化中必备的一环,而随着webpa ...
使用Grunt生成雪碧图
1.Grunt是基于 Node.js 的项目构建工具,所以使用Grunt之前必须先安装好node.js和npm包管理器 2.全局安装Grunt的命令行支持,安装完之后,命令提示符中将会识别grunt命 ...

一键生成sprite（雪碧图）以及动态加载1X 2X3X 图片

一. 为什么要使用sprite （雪碧图）

二. CSS雪碧图原理及应用

三. 生成雪碧图的三种实现方式

一.为什么要使用雪碧图

二.CSS雪碧图原理及应用

方法一
这里提供一个很好用的在线的图片合并网站
http://csssprites.com/可以根据自己的需要添加边距等等，还会生成对应的参考css 如图

方法二目前大多数前端项目都采用 webpack打包同时可以使用webpack-spritesmith 插件

一键生成sprite（雪碧图）以及动态加载1X 2X3X 图片相关推荐

最新文章

热门文章

一键生成sprite（雪碧图）以及 动态加载1X 2X3X 图片

一. 为什么要使用sprite （雪碧图）

二. CSS雪碧图原理及应用

三. 生成雪碧图的三种实现方式

一.为什么要使用雪碧图

二.CSS雪碧图原理及应用

方法一 这里提供一个很好用的在线的图片合并网站 http://csssprites.com/可以根据自己的需要添加边距等等，还会生成对应的参考css 如图

方法二 目前大多数前端项目都采用 webpack打包 同时可以使用webpack-spritesmith 插件

一键生成sprite（雪碧图）以及 动态加载1X 2X3X 图片相关推荐

最新文章

热门文章

一键生成sprite（雪碧图）以及动态加载1X 2X3X 图片

方法一
这里提供一个很好用的在线的图片合并网站
http://csssprites.com/可以根据自己的需要添加边距等等，还会生成对应的参考css 如图

方法二目前大多数前端项目都采用 webpack打包同时可以使用webpack-spritesmith 插件

一键生成sprite（雪碧图）以及动态加载1X 2X3X 图片相关推荐