crazyimg : 图片相应式

介绍

图片相应式组件

使用方法

 
define(['fui/crazyimg/1.0'], function(Crazyimg){
	var crazyImg = new Crazyimg();
});

标签自定义属性

属性名 属性值说明
data-origimg 必选;原始图片,如果使用默认配置,图片URL中必须包含宽度和高度
data-imgrule 可选;可以单独对某张图片制定特殊的规则,值的格式和配置参数中的"rule"一致

配置参数

配置参数 参数类型/可选值 参数默认值 作用说明
container String | 元素对象 document 容器
atAttr String 'src' 将适配后的图片URL设置在哪个标签属性值上
rule Object {dpr:..., ns:..., reg:..., replaceImg:...} 图片适配规则
dpr Object {'1':1, '2':2} DPR适配规则;数字key表示dpr值,数字value表示适配的图片倍数;对象中的value也可以是字符串;如:{'1':'75x75'},表示dpr=1时取75x75大小的图片
ns Object {'2g':1} 网络适配规则,默认值表示2g网络下取一倍大小的图片,其他网络状态下走dpr规则
reg 正则表达式 /(\.((\d+)x(\d+)|search)){0,1}.jpg$/ 获取图片宽度、高度的正则表达式
replaceImg Function null 替换规则函数;当正则表达式改变时,一般情况下需要传入此函数;否则无需传
eachAfter Function null 每张图片被修改指定属性值后执行的回调函数
complete Function null 所有图片被修改指定属性值后执行的回调函数