4.0.5 • Published 3 years ago
imgx v4.0.5
intro
让图片渐进的加载
react版本必须为17.x.x 以上。
支持
- 务必:原图cdn地址是七牛云
how to use?
import React from 'react';
import { Imgx } from '@kkb/imgx';
const DemoPage = ({ images }) => (
<div>
<Imgx
src={"https://img.kaikeba.com/platform/247103210202xrti.jpg"}
wrapperClassName={'cssName'} // 外层样式,必须定义宽高,这样才有动画渐变效果
className={'cssName'} // img标签样式
delayTime={2.3} // 动画持续时间
beforeLoad={() => {}} // 加载后回调
onClick={(e) => {}} // 点击事件
errorImgUrl={"url"} // 图片加载失败后,显示的图片
imgHitWidth={400} // 图片压缩宽度(等比压缩)
/>
</div>
);
组件参数props介绍
名称 | 类型 | 默认值 | 描述 | ||
---|---|---|---|---|---|
wrapperClassName | String | 组件外层样式,必须定义宽度,低倍图过渡效果动画才有 | |||
className | String | img图片样式 | |||
src | String | 图片地址 | |||
imgHitWidth | number | 图片压缩宽度,等比压缩图片,无需设置压缩高度 | |||
delayTime | number | 1 | 过渡动画持续时间,单位秒 | ||
beforeLoad | Function | img加载后回调 | |||
onClick | Function | imx点击事件 | |||
errorImgUrl | String | 图片加载失败后,显示的图片 | |||
loading | "lazy" 、 "eager" | lazy | 图片加载模式,lazy懒加载,eager同步加载 | ||
offset | String | 200px | 懒加载偏移量,默认可视区外200px内就开始加载图片 | ||
quality | number | 85 | 图片压缩质量,0-100区间 | ||
<!-- | --> |
4.0.5
3 years ago
1.0.20
4 years ago
1.0.19
4 years ago
1.0.18
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.11
4 years ago
1.0.12
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.0
4 years ago