Skip to content
简单易用的图片延时替换/加载/预加载插件,无依赖
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
images
src
.babelrc
.gitignore
README.md
bower.json
gulpfile.babel.js
package.json
task.js

README.md

readyLoadImg

一个轻量级的图片预加载/替换库。
在页面启动时使用有损压缩后的低质量图片,保证快速的渲染。随后在浏览器无压力时预加载相应图片,预加载完成后进行替换。

安装

你可以下载源文件或通过bower/npm安装

bower install readyLoadImg --save
#or
npm install ready-loadimg --save

启动

插件不依赖第三方库,同时支持AMD(requirejs)方式引入. 首先你需要通过'new'来创建一个实例,然后通过start启动:

const imgLoad = new ReadyLoadImg(config ={});
imgLoad.start();

参数

config = {
	checkCSS: false,                    // 检查css内的图片,默认只检查dom内的img标签
	requiredLoad: 'load-img',           // 需要替换的图片标签标识 默认为'load-img',如果有冲突可以替换为其他字符串
	requiredLoadName: '-min',           // 替换图片命名方式 比如你可以将有损图片命名为'demo-min.png',而高质量图片为'demo.png'.
	delay: 300,                         // 检测频率
}

特点

  • 消耗资源极少(cpu/内存),检测速度快
  • 无缝替换图片,不会引起闪白/闪烁/高度坍塌
  • 多个生产环境使用中,长期维护
  • 请参照task.js打包图片至低质量

附打包脚本

使用gulp打包压缩图片与重命名(具体参见 task.js):

  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">
      const readyLoad = new ReadyLoadImg ();
      readyLoad.start();
    </script>
You can’t perform that action at this time.