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 |
所有图片被修改指定属性值后执行的回调函数 |