1.2.11 图片优化组件

优质

小牛编辑

120浏览

2023-12-01

最新版本: [0.2.10]

依赖：

(//g.alicdn.com/mtb/lib-windvane/2.1.0/windvane.js) 无须手动引入，调用Tida.ready后该库自动引入
(//g.alicdn.com/mtb/lib-httpurl/1.3.2/httpurl.js)

完整引入URL

<script src="//g.alicdn.com/mtb/??lib-httpurl/1.3.2/httpurl.js,lib-img/0.2.10/img.js"></script>

功能：

图片域名收敛,收敛至gw.alicdn.com
自动适配设备dpi,输出对应的cdn后缀，
支持网络环境判断，输出不同的cdn图片q值
webp格式适配，android设备支持webp格式
支持懒加载

实例化

var imgHelper = lib.img({
'class':'lib-img',//图片class
'dataSrc':'data-src',//图片真实src 的data字段
'size': '320x320',//cdn尺寸
'sharpen': 's150',//锐化参数
'q': ['q50', 'q30'],//图片质量[非弱网，弱网]
'enableLazyload':true//是否开启懒加载功能，默认true,
'lazyHeight': 0,//[可选]，预加载当前屏幕以下lazyHeight内的图片，默认0
'lazyWidth': 0,//[可选]，预加载当前屏幕右边lazyWidth内的图片，默认0
'enalbeIOSWifiLoadMore':false//ios&&wifi情况下 是否取消懒加载,采用一次性加载，默认false
  });

data-xxx标记：

需要自定义某些图片的尺寸，类型时候，可以在html上使用data-xxxx标记

data-size:自定义该图片的size
data-type:自定义该图片的类型,'heightFixed'/'widthFixed'/'xz'/'square'
data-original:需要原图，不加任何后缀
例子：
<img class="lib-img" data-size="320x320" data-type="heightFixed" data-original src="xxxx" data-src="xxx"/>

API:

getNewUrl(src,[param]):

根据传入的图片src参数，输出新的url

src{string}:图片url,必选
param{string | object}:配置项，可选
- string：'300x300',输入300x300的cdn 方图尺寸
- object：
  - object['size']:{number|string},200 / '200x200'，//期望的size
  - object['type']:{string},square/widthFixed/heightFixed/xz//(图片类型：方图[默认]，定宽，定高，裁剪)
  - object['isOriginal']:{boolean},是否需要原图，只收敛域名，不加任何cdn后缀

例子：

console.log(imgHelper.getNewUrl('http://img04.taobaocdn.com/bao/uploaded/i4/TB1EYW4GXXXXXXnXXXXXXXXXXXX_!!0-item_pic.jpg_270x270xz.jpg'));

console.log(imgHelper.getNewUrl('http://gtms01.alicdn.com/bao/uploaded/TB1_j4jGFXXXXX9XXXXSutbFXXX.jpg_320x320q75.jpg_.webp'));

console.log(imgHelper.getNewUrl('http://img01.daily.taobaocdn.net/bao/uploaded/TB1jXmKXXXXXXXeXpXXSutbFXXX.jpg_640x640.jpg')); // 日常环境

console.log(imgHelper.getNewUrl('http://gw1.alicdn.com/tfscom/tuitui/T1PTkEFp8jXXXXXXXX')); // 无后缀url

console.log(imgHelper.getNewUrl('http://gtms02.alicdn.com/tps/i2/TB1pCHrGVXXXXcrXFXX4torNVXX-400-280.jpg','333x333'));

fireLazyload()

重新遍历懒加载图片，触发懒加载，适用于动态插入图片节点的场景

imgHelper.fireLazyload();

lib.img.defaultSrc

默认占位图片(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)

常见问题：

~~gif图片：只做域名收敛，不加任何后缀。~~
png图片:q值无效，sharpen值会使图片失真，两个值会过滤掉
~~png|gif图片:不加_.webp参数，小米2s上png加webp图片不显示，gif加webp动画失效~~
bug反馈@明毅