4.0.5 • Published 3 years ago

imgx v4.0.5

Weekly downloads
2
License
ISC
Repository
github
Last release
3 years ago

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介绍

名称类型默认值描述
wrapperClassNameString组件外层样式,必须定义宽度,低倍图过渡效果动画才有
classNameStringimg图片样式
srcString图片地址
imgHitWidthnumber图片压缩宽度,等比压缩图片,无需设置压缩高度
delayTimenumber1过渡动画持续时间,单位秒
beforeLoadFunctionimg加载后回调
onClickFunctionimx点击事件
errorImgUrlString图片加载失败后,显示的图片
loading"lazy" 、 "eager"lazy图片加载模式,lazy懒加载,eager同步加载
offsetString200px懒加载偏移量,默认可视区外200px内就开始加载图片
qualitynumber85图片压缩质量,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