webp的js插件_GitHub - hbxeagle/webpjs: 监测浏览器或webview是否支持webp文件，然后将普通图片的目录自动替换为webp的目录。...

webpjs

此插件是针对移动平台做的，考虑到移动平台的特殊性，所以提供两个版本：

一个是没有lazy效果的webp.js，需要通过手动调用。

另一个是有lazy效果的webp.lazy.js(基于jquery.lazy.js修改)。

可视情况选择不同的版本。

2016.02.16更新

1、修改目录替换规则，当不配置orgDir和webpDir时，不替换目录，只提换后缀。

2、修改example中的gulp文件，将webp文件生成至image同目录。

jquery/zepto webp插件

调用方式1：

// 简化方式

$.webp();

处理所有的有 lsrc 属性，且lsrc属性的目录中包含 images 目录的标签。

如果是img标签，则赋值src属性，其他类型的标签修改background-image属性。

调用方式2:

$('.p3').webp();

查找处理.page.p3 这个dom节点下所有有 lsrc 属性， 且lsrc属性的目录中包含 images 目录的标签。

处理过程同上。

options

origSrc

用于存放图片原文件地址(png,jpg,jpeg,gif)的标签属性，默认为 lsrc

origDir

图片原文件根目录，会替换为webp的根目录，支持自定义配置，默认为空，即不需要替换目录，只替换后缀

webpDir

图片原webp文件目录，支持自定义配置，默认为空，即不需要替换目录，只替换后缀

注意1

由于采用lsrc的形式，所以img标签不要设定src属性，防止重复加载。

对于设置了背景图片的标签，请将css中的background-image单独拎出来注释掉。

注意2

由于是采用替换目录的方式修改webp图片的路径，所以必须保证orgDir和webpDir两个目录结构是相同的。

建议使用gulp之类的工具自动生成文件。example中有具体示例。