#readyLoadImg 一个轻量级的图片预加载/替换库.在页面启动时使用有损压缩后的低质量图片,保证快速的渲染,随后在浏览器无压力时预加载相应图片,预加载完成后进行替换:
- 页面默认加载有损压缩图片,如demo-min.png,在dom渲染完成后它们将会被自动替换成高质量图片,而且已经预加载完成,并不会出现卡屏现象
- css中背景图片也可以通过有损压缩,页面完成后替换.
- 指定某几张图片延时加载
- 指定预加载任意的图片数组
- 你可以通过gulp来批量压缩重命名图片文件(参见demo-gulpFile.js)
安装readyLoadImg 你可以下载源文件或通过bower管理工具安装
bower install readyLoadImg --save-dev
插件不依赖第三方库,同时支持AMD(requirejs)方式引入. 首先你需要通过'new'来创建一个实例,然后通过start启动:
var imgLoad = new readyLoadImg();
imgLoad.start();
readyLoadImg()下的参数简单说明:
var imgLoad = new readyLoadImg(attrName, srcName, timeOut);
- attrName: 图片上的标记属性,如
<img load-img>
.默认为'load-img',如果有冲突可以替换为其他字符串. - srcName: 有损低质量图片与高质量图片命名区别,默认为'-min'.比如你可以将有损图片命名为'demo-min.png',而高质量图片为'demo.png'.
- timeOut: 在页面渲染完成后是否需要继续等待,默认为100ms.
背景图片参数:
imgLoad.bgToggle(true);
- bgToggle(true): 开启此模式后,'load-img'属性可以标记在任意HTML元素上,插件将去寻找它们的背景图片,在预加载完成后将它们逐一替换.
使用gulp打包压缩图片与重命名(具体参见demo-gulpFile.js,需要的服务请先npm install):
gulp.task('img', function () {
return gulp.src('images/*.{png,jpg,gif}')
.pipe(imagemin({
optimizationLevel: 7, //取值范围:0-7(优化等级)
progressive: false, //无损
interlaced: true, //隔行扫描
multipass: true, //多次优化svg
svgoPlugins: [{removeViewBox: false}],//SVG-viewbox
use: [pngquant()] //高度压缩
}))
.pipe(rename({ suffix: '-min' }))
.pipe(gulp.dest('test'))
.pipe(notify({ message: 'image task over' }));
})
两个简单的使用示例:
<!--替换图片-->
<img src="./images/bower-min.png" alt="" load-img/>
<script type="text/javascript">
var RLI = new readyLoadImg ();
RLI.start();
</script>
<!--延时指定的图片-->
<img src="./images/bower-logo.png" alt="" delay-img />
<script type="text/javascript">
var RLI = new readyLoadImg ();
RLI.delay(); //支持一个参数,为延时时间,单位:毫秒
RLI.old; //被readyLoadImg覆盖的全局记录在old上
</script>